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 transparent;
     border-right : 25px solid transparent;
     border-bottom: 25px solid transparent;
     border-left  : 25px solid #c10902;
     width :0px;
     heigth:0px;
}



Example:

CSS
.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

Random Bouncing Ball Animation