.apps4developers_css_shape {
position: relative;
display: block;
width: 0px;
height: 0px;
margin: 32px 0;
color: #CFB53B;
border-left: 64px solid transparent;
border-right: 64px solid transparent;
border-bottom: 44.8px solid #CFB53B;
transform: rotate(35deg);
}
.apps4developers_css_shape::before {
content: '';
position: absolute;
top: -28.8px;
left: -41.6px;
display: block;
height: 0;
width: 0;
border-left: 19.2px solid transparent;
border-right: 19.2px solid transparent;
border-bottom: 51.2px solid #CFB53B;
transform: rotate(-35deg);
}
.apps4developers_css_shape::after {
content: '';
position: absolute;
top: 1.8px;
left: -67.2px;
display: block;
width: 0px;
height: 0px;
color: #CFB53B;
border-left: 64px solid transparent;
border-right: 64px solid transparent;
border-bottom: 44.8px solid #CFB53B;
transform: rotate(-70deg);
}
See more shares on Apps4Developers.com - https://www.apps4developers.com/css-shapes/
Top comments (2)
I highly recommend you to drop this method and consider clip-path (bennettfeely.com/clippy/)
The border trick is very old and logically all the articles around CSS shapes that are very old are best referenced so people still get such tricks when googling them
Thanks for the suggestions, I will try to include it in the upcoming version.