How to make a box with arrow in CSS? [duplicate]

Like this :

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;

Demo :


It can also be achieved without empty elements with the css property :before

element:before {
    content: "";
    position: absolute;
    top: 50%;                         // half way down (vertical center).
    margin-top: -15px;                // adjust position, arrow has a height of 30px. 
    border: solid 15px transparent;
    border-right-color: #FFF;
    z-index: 1;

Demo :

hope it helps

Leave a Comment