Home / Articles / Programming languages / Markup languages / HTML & CSS / Changing shape of a block to look like diamond, ribbon or right and left arrows using only CSS

Changing shape of a block to look like diamond, ribbon or right and left arrows using only CSS

Changing shape of a block to look like diamond, ribbon or right and left arrows using only CSS
 
Changing shape of a block to look like diamond, ribbon or right and left arrows using only CSS
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

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

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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:


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation