JSFiddle - React, Tailwind, and code Playground

by Thermopyle

HTML

<div class="arrow">
    simple solution, using 2 divs
    <div class="triangle down"></div>
</div>


<div class="css3-arrow down">
    and much more cleaner solution using CSS3
</div>

CSS

.css3-arrow,
.arrow{
    background: #ccc;
    position: relative;
    width: 300px;
}
.triangle{
    position:absolute;
}
.css3-arrow.down:before,
.triangle.down{
    width: 0;
    height: 0;
    border-left: 150px solid #000;
    border-right: 150px solid #000;
    border-top: 30px solid #ccc;
    top: 100%;
}
.css3-arrow{
    margin-top: 100px;
}
.css3-arrow:before{
    content: '';
    position: absolute;
}