Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
Silva Web Designs - Blog

How to make an arrow with a point using divs and CSS

Here is an arrow with pure CSS which is supported by all web browsers.

css-arrow-with-point

HTML


<div class="arrow">
  <div class="line"></div>
  <div class="point"></div>
</div>

CSS


.arrow {
    width:120px;
}

.line {
    margin-top:14px;
    width:90px;
    background:blue;
    height:10px;
    float:left;
}
.point {    
    width: 0;
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid blue;
    float:right;
}

 

It’s good to share

Join the discussion