DEV Community

Sanchit Gupta
Sanchit Gupta

Posted on

Creating Star using only CSS

Star

.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);
}
Enter fullscreen mode Exit fullscreen mode

See more shares on Apps4Developers.com - https://www.apps4developers.com/css-shapes/

Discussion (2)

Collapse
afif profile image
Temani Afif

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

Collapse
guptasanchit90 profile image
Sanchit Gupta Author

Thanks for the suggestions, I will try to include it in the upcoming version.