Drawing Ribbons in CSS3

, , 1 Comment

We can create illusion of shapes using pure css by utilizing the border property in creative ways. Do you ever think of creating different shapes in CSS such as ribbons. Now most of us familiar with "-moz-border-radius" and "-webkit-border-radius" properties to create rounded corners. In this post I will show you How to draw ribbons using border property.

Before going to the shapes, i will explain the CSS border-width and border-color  Property.

we have set the border-width top:30px, left:30px, bottom:30px and right 30px. You can clearly identify setting border-color property using different color as below example

CSS

#box{  border-width:30px 30px 30px 30px;  border-style:solid;  border-color: #FF0 #009 #060 #F00;  height:1px;  width:1px;  }

 

Result

Now we will see how to draw simple ribbon

Ribbon 1

HTML

<div class="ribbon"></div>

 

CSS

.ribbon {  display:block;  width:100px;  height:300px;  background:#d00202;  }

 

.ribbon:after {  content:"";  display:block;  position:relative;  top:300px;  width:0;  height:0;  border-width:30px 50px 50px 50px;  border-style:solid;  border-color:#d00202 #d00202 transparent #d00202 ;  }

 

Before and after pseudo-elements:

The before and after pseudo elements are used in conjunction with the content property to place content either side of an element. By using these elements, we will have minimal markup.

Result

 

Ribbon 2

HTML

<div class="ribbon2"></div>  <div class="ribbon2l"></div>  <div class="ribbon2r"></div>

 

CSS

.ribbon2 {  display:block;  width:300px;  height:50px;  background:#d00202;  margin-left:50px;  border:2px solid #aa0000;  }   .ribbon2l {  display:block;  position:relative;  width:0;  height:0;  border-width:25px 25px 25px 25px;  border-style:solid;  top:-50px;  border-color:#d00202 #d00202 #d00202 transparent ;  }   .ribbon2r {  display:block;  position:relative;  width:0;  height:0;  border-width:25px 25px 25px 25px;  border-style:solid;  top:-100px;  margin-left:350px;  border-color:#d00202 transparent #d00202 #d00202 Â ;  z-index:-1;  }

 

z-index

  • The z-index property specifies the stack order of an element.
  • An element with greater stack order is always in front of an element with a lower stack order.
  • z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Result

 

Ribbon 3

HTML

<div class="ribbon3"></div>  <div class="rectangle3topl"></div>  <div class="rectangle3topr"></div>  <div class="ribbon3l"></div>  <div class="ribbon3r"></div>

 

CSS

.ribbon3 {  display:block;  position:absolute;  width:300px;  height:50px;  top:50px;  background:#d00202;  margin-left:50px;  border:2px solid #aa0000;  }   .rectangle3topl {  content:"";  display:block;  position:relative;  top:24px;  left:29px;  width:0;  height:0;  border-width:20px 20px 20px 20px;  border-style:solid;  border-color:transparent #ad0000 transparent transparent ;  z-index:-1;  }   .rectangle3topr {  content:"";  display:block;  position:relative;  top:-17px;  left:334px;  width:0;  height:0;  border-width:20px 20px 20px 20px;  border-style:solid;  border-color:transparent transparent transparent #ad0000 ;  z-index:-1;  }   .ribbon3l {  display:block;  position:absolute;  width:0;  height:0;  border-width:25px 25px 25px 25px;  border-style:solid;  top:32px;  left:27px;  border-color:#d00202 #d00202 #d00202 transparent ;  z-index:-2;  }   .ribbon3r {  display:block;  position:absolute;  width:0;  height:0;  border-width:25px 25px 25px 25px;  border-style:solid;  top:31px;  left:342px;  border-color:#d00202 transparent #d00202 #d00202 Â ;  z-index:-2;  }

 

Result

 

Ribbon 4

HTML

<div class="ribbon4L"></div>  <div class="ribbon4R"></div>  <div class="rectangle4"></div>

 

CSS

.rectangle4 {  display:block;  position:relative;  top:-332px;  left:25px;  width:100px;  height:30px;  background:#ad0000;  z-index:-1;  }   .ribbon4L {  width:30px;  height:200px;  background:#d00202;  -webkit-transform:rotate(44.5deg);  -moz-transform:rotate(44.5deg);  rotation:44.5deg;  position: relative;  left:50px;  top:50px;  }   .ribbon4R {  width:30px;  height:200px;  background:#d00202;  -webkit-transform:rotate(-44.5deg);  -moz-transform:rotate(-44.5deg);  rotation:-44.5deg;  position: relative;  left:70px;  top:-150px;  }

 

-webkit-transform:rotate and -moz-transform:rotate will rotate the box in to -44.5 degree and the other is the standard rotation rule as it will be used once this rotation property becomes standard.

Result

 

Ribbon 5

HTML

<div class="rectangle5l"></div>  <div class="rectangle5r"></div>  <div class="rectangle5topl"></div>  <div class="rectangle5topr"></div>

 

CSS

.rectangle5l {  content:"";  display:block;  position:relative;  top:300px;  width:0;  height:0;  left:53px;  border-width:30px 30px 150px 30px;  border-style:solid;  border-color:transparent transparent #d00202 transparent;  -webkit-transform:rotate(33.5deg);  -moz-transform:rotate(33.5deg);  rotation:33.5deg;  }   .rectangle5r {  content:"";  display:block;  position:relative;  top:120px;  margin-left:65px;  width:0;  height:0;  left:50px;  border-width:30px 30px 150px 30px;  border-style:solid;  border-color:transparent transparent #d00202 transparent;  -webkit-transform:rotate(-33.5deg);  -moz-transform:rotate(-33.5deg);  rotation:-33.5deg;  }   .rectangle5topl {  content:"";  display:block;  position:relative;  top:-47px;  margin-left:-5px;  width:0;  height:0;  left:50px;  border-width:30px 70px 30px 70px;  border-style:solid;  border-color:transparent transparent transparent #d00202 ;  }   .rectangle5topr {  content:"";  display:block;  position:relative;  top:-107px;  margin-left:-8px;  width:0;  height:0;  left:50px;  border-width:30px 70px 30px 70px;  border-style:solid;  border-color:transparent #d00202 transparent transparent  ;  }

 

Result

Share this: