You have already rated this page, you can only rate it once!

Sometimes a web page needs some special elements such as arrows or ribbons, and the simplest way to create them is to apply particular CSS styles for elements to change their shapes.

An example below contains four div elements with different classes, where the name of each class is associated with the shape of the block which is created by using particular CSS styles.

Here is HTML code:

<div class="diamond">Diamond</div> <div class="ribbon">Ribbon</div> <div class="right-arrow">Right arrow</div> <div class="left-arrow">Left arrow</div>

CSS styles used for changing shapes of blocks add two elements to each block to form its shape. These two elements have the same color (except the "ribbon", see example) as the block to which they belong to and make an illusion of the block changing its shape. These two elements are added by using pseudo-elements before and after in CSS. These pseudo-elements form their own shapes by using a hack that is based on different values for border CSS property.

CSS styles:

div.diamond, div.ribbon, div.right-arrow, div.left-arrow { display: inline-block; color: #FFFFFF; font-size: 22px; line-height: 38px; margin: 15px 0; position: relative; width: 200px; } div.diamond:before, div.diamond:after, div.ribbon:before, div.ribbon:after, div.right-arrow:before, div.right-arrow:after, div.left-arrow:before, div.left-arrow:after { content: ""; border-style: solid; border-width: 0; height: 0; position: absolute; width: 0; } div.diamond { background-color: #CCCCCC; } div.diamond:after, div.diamond:before { border-color: transparent #CCCCCC; } div.diamond:before { left: -19px; border-width: 19px 19px 19px 0; } div.diamond:after { right: -19px; border-width: 19px 0 19px 19px; } div.ribbon { background-color: #CCCCCC; } div.ribbon:before, div.ribbon:after { top: 6px; z-index: -15; } div.ribbon:before { border-color: #B2B2B2 #B2B2B2 #B2B2B2 transparent; border-width: 19px; left: -25px; } div.ribbon:after { border-color: #B2B2B2 transparent #B2B2B2 #B2B2B2; border-width: 19px; right: -25px; } div.right-arrow { background-color: #CCCCCC; } div.right-arrow:after, div.right-arrow:before { border-width: 19px 0 19px 19px; } div.right-arrow:before { border-color: #CCCCCC transparent; left: -19px; } div.right-arrow:after { border-color: transparent #CCCCCC; right: -19px; } div.left-arrow { background-color: #CCCCCC; } div.left-arrow:after, div.left-arrow:before { border-width: 19px 19px 19px 0; } div.left-arrow:before { border-color: transparent #CCCCCC; left: -19px; } div.left-arrow:after { border-color: #CCCCCC transparent; right: -19px; }

Live demo

The following archive contains the example above: