Center Triangle at Bottom of Div in HTML with CSS

To set the triangle at the center and at the bottom of div, use the following. You need to set left to 50% −

.demo: after {
   position: absolute;
   border-top: solid 50px #e15915;
   border-left: solid 50px transparent;
   border-right: solid 50px transparent;
   top: 100%;
   left: 50%;
   margin-left: -50px;
   width: 0;
   height: 0;
}

Vrundesha Joshi

e

Updated on: 24-Jun-2020

638 Views

Kickstart Your Career

Get certified by completing the course

Get Started