Tiggles ツ
3/14/2018 - 2:45 PM

Triangles CSS

Here are 2 types of triangles to use when styling. The first will add an element of color choice additively into the design (triangle + content). The latter is seemingly destructive/inset (triangle - content).

triangles.scss
content_copyfile_download
	//type 1 - Content + Triangle
	&:before {
		content: '';
		width: 30px;
		height: 30px;
		transform: rotate(45deg) translateX(-50%);
		position: absolute;
		// top: 0;
		left: 50%;
		background-color: white;
	}
	
	
	//type 2 - Content - Triangle
	&:before {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 1;
			bottom: 0;
			height: 50px;
			background-color: white;
			clip-path: polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
		}