Tiggles ツ of Speak Creative
11/28/2018 - 5:40 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).

https://css-tricks.com/snippets/css/css-triangle/

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%);
		}
		
		
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}