CSS Shapes & Graphics

Whenever possible avoid bitmaps(jpg, png, gif etc.) and use html and css for simple (or even pretty complicated) shapes and graphics.

Often used in Websites and webapplications to indicate a flow or relation. Using images for triangles will produce aliased, ugly edges, especially on retina devices.
Using CSS (or SVG, more on using SVG’s later) will result in crisp edges and at the same time reduce your page’s weight.

Simple triangles

Borders can be used to create clean and simple triangles. By using transparent borders, one border will be cut off by the other transparent borders, resulting in a triangular shape.
The border that makes up the colored inside of a triangle will be the border opposite to the direction the traingle points to (border-bottom for an up arrow and so on). Diagonal pointing arrows (up-right, bottom-left etc.) are an exception to this rule.

HTML

<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-right"></div>
<div class="triangle-left"></div>
<div class="triangle-up-left"></div>
<div class="triangle-up-right"></div>
<div class="triangle-down-right"></div>
<div class="triangle-down-left"></div>

CSS

div[class^="triangle-"], 
div[class*=" triangle-"] {
	width: 0; /* all div's with a classname starting with "triangle-" should have no (0) width */
	height: 0; /* same goes for the height of our triangle div */
}

.triangle-up {
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;	
	border-bottom: 50px solid #123;
}

.triangle-down {
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid #BADA55;
}

.triangle-right {
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid #ABBA01;
}

.triangle-left {
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent; 
	border-right: 50px solid #5ADA55;
}

.triangle-up-left {
	border-bottom: 50px solid transparent;
	border-left: 50px solid #4679BD;
}
.triangle-up-right {
	border-left: 50px solid transparent;
	border-top: 50px solid #4679BD;
}
.triangle-down-right {
	border-top: 50px solid transparent;
	border-right: 50px solid #4679BD;
}
.triangle-down-left {
	border-right: 50px solid transparent;
	border-bottom: 50px solid #4679BD;
}

The great thing about this technique’s simplicity is that it’s very easy to use on pseudo elements as well. We could make a typical speech bubble with very little markup.

HTML

<div class="speech-bubble">
	<h4>GREAT!</h4>
</div>

CSS

.speech-bubble {
	background: #ccc;
	position: relative;
	text-align: center;
	padding: 20px 0;
	margin: 20px 30px;
	width: 150px;
	border-radius: 10px;
}
.speech-bubble:after {
	content: '';
	position: absolute;
	display: block;
	top: 50%;
	right: 100%;
	margin-top: -10px;

	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #ccc;
}


See the Pen Really Simple Speech Bubble by Status201 (@status201) on CodePen
18405

Using the same technique, combined with a parent container with hidden overflow, we can make responsive triangles. The container has no height and a padding in percentage, just like the responsive embed technique.

HTML

<div class="responsive-triangle up">
</div>

<div class="responsive-triangle left">
</div>

CSS

/* All triangle variants will share these styles */
.responsive-triangle {
	height: 0;
	overflow: hidden; 
}
.responsive-triangle:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
}

/* Responsive triangle up */
.responsive-triangle.up {
	width: 20%;
	padding-left: 20%;
	padding-bottom: 20%;
}
.responsive-triangle.up:after {
	margin-left: -1000px;
	border-left: 1000px solid transparent;
	border-right: 1000px solid transparent;
	border-bottom: 1000px solid #BADA55;
}

/* Responsive triangle left */
.responsive-triangle.left {
	width: 10%;
	padding-top: 10%;
	padding-bottom: 10%;
}
.responsive-triangle.left:after {
	margin-top:-1000px;
	border-top: 1000px solid transparent;
	border-bottom: 1000px solid transparent;
 	border-right: 1000px solid #123;
}

See the Pen Responsive triangles by Status201 (@status201) on CodePen.18405

HTML

	<div class="star-5-points"></div>

CSS

.star-5-points {
	margin: 50px 0;
	position: relative;
	display: block;
	width: 0px;
	height: 0px;
	color: #BADA55;
	border-right:  100px solid transparent;
	border-bottom: 70px  solid #BADA55;
	border-left:   100px solid transparent;
	-moz-transform:    rotate(35deg);
	-webkit-transform: rotate(35deg);
	-ms-transform:     rotate(35deg);
	-o-transform:      rotate(35deg);
	transform:         rotate(35deg);
}
.star-5-points:before {
	content: '';
	border-bottom: 80px solid #BADA55;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	position: absolute;
	height: 0;
	width: 0;
	top: -45px;
	left: -65px;
	display: block;
	-webkit-transform: rotate(-35deg);
	-moz-transform:    rotate(-35deg);
	-ms-transform:     rotate(-35deg);
	-o-transform:      rotate(-35deg);
	transform:         rotate(-35deg);
}
.star-5-points:after {
	content: '';
	position: absolute;
	display: block;
	top: 3px;
	left: -105px;
	width: 0px;
	height: 0px;
	color: #BADA55;
	border-right: 100px solid transparent;
	border-bottom: 70px solid #BADA55;
	border-left: 100px solid transparent;
	-webkit-transform: rotate(-70deg);
	-moz-transform:    rotate(-70deg);
	-ms-transform:     rotate(-70deg);
	-o-transform:      rotate(-70deg);
	transform:         rotate(-70deg);
}

See the Pen Star 5 points by Status201 (@status201) on CodePen.18405

Leave a Reply