Creating arrow edges using CSS

Before we start, we have to understand the concept behind  "border"

Basically, borders render like this:
#sampleStyle{
   border-top   : 25px solid #a71d95;
   border-right : 25px solid #1da2a7;
   border-bottom: 25px solid #70a71d;
   border-left  : 25px solid #c10902;
   width :60px;
   heigth:60px;
}

If we compress the content area, i.e) make width and height values to "0px"

#sampleStyle{
     border-top   : 25px solid #a71d95;
     border-right : 25px solid #1da2a7;
     border-bottom: 25px solid #70a71d;
     border-left  : 25px solid #c10902;
     width :0px;
     heigth:0px;
}


If we want right arrow , make all border-color except border-left-color to transparent


#sampleStyle{
     border-top   : 25px solid #a71d95;
     border-right : 25px solid #1da2a7;
     border-bottom: 25px solid #70a71d;
     border-left  : 25px solid #c10902;
     width :0px;
     heigth:0px;
}


Example:
.arrow_box { 
  position: relative;
  background: #182126; 
  border: 1px solid #000000; 
  padding: 40px;
  width: 280px;
  height: 100px;
  border-radius: 6px;
  font-family:"Arial";
  font-size:46px;
} 

.arrow_box:after, .arrow_box:before { 
  top: 100%; 
  border: solid transparent; 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  pointer-events: none;
} 

.arrow_box:after { 
  border-color: rgba(24, 33, 38, 0); 
  border-top-color: #182126; 
  border-width: 30px; 
  left: 50%; 
  margin-left: -30px; 
}

.arrow_box:before { 
  border-color: rgba(0, 0, 0, 0); 
  border-top-color: #000000; 
  border-width: 31px; 
  left: 50%; 
  margin-left: -31px; 
}
HTML
<div class="arrow_box">CSS ARROW EXAMPLE</div>

OUTPUT






Popular posts from this blog

Simple Animation Using C

Personal Diary - A Mini Project Written in Turbo C With Graphical Interface

2D Reflection