How best to create this arrow shaped div/button?

Question

first post on Stack. I've been asked to recreate this design for a project and I'm not entirely sure how best to approach recreating this div/button with an arrowed bottom side.

I'm fairly comfortable with most CSS conventions but for custom styles like this, I'm a bit lost as to a starting point. If anybody could point me in the right direction I would be much appreciated.

Thanks very much, Nathan

Answer 1

 .button { position: relative; background-color: rgb(128,250,128); padding: 10px 0px; width: 60px; text-align: center; } .button::after { display: block; position: absolute; bottom: -10px; content: ""; width: 0px; border-color: rgb(128,250,128) transparent; border-style: solid; border-width: 10px 30px 0px 30px; /*10 is the height and 30 is half of parent width*/ }

 <div class="button"> button <div>

Answer 2

Here is the CSS you need to make a div/button angled downwards:

 .menu { background-color: #0b0; border: 1px solid #000; float: left; height: 50px; line-height: 50px; margin: 0; position: relative; text-align: center; width: 150px; } .menu.active { background-color: #0d0; } .menu.active::after { border-top: 10px solid #0d0; border-left: 75px solid transparent; border-right: 75px solid transparent; bottom: -10px; content: ""; left: 0; position: absolute; } .menu.active::before { border-top: 10px solid #000; border-left: 75px solid transparent; border-right: 75px solid transparent; bottom: -11px; content: ""; left: 0; position: absolute; }

 <div class="menu"> HOME </div> <div class="menu active"> MORE REVIEWS </div> <div class="menu"> ABOUT </div>