one <div>
Star
Three triangles: the div itself plus two rotated pseudo-elements.
<div class="od od-star"></div>
.od {
position: relative;
display: block;
box-sizing: border-box;
}
.od::before,
.od::after {
content: '';
position: absolute;
box-sizing: border-box;
}
.od-star {
width: 0; height: 0;
border-left: 36px solid transparent;
border-right: 36px solid transparent;
border-bottom: 26px solid #f5b301;
transform: translateY(-8px);
filter: drop-shadow(0 8px 16px rgba(245, 179, 1, 0.35));
}
.od-star::before {
width: 0; height: 0;
border-left: 36px solid transparent;
border-right: 36px solid transparent;
border-bottom: 26px solid #f5b301;
top: 8px; left: -36px; transform: rotate(72deg);
}
.od-star::after {
width: 0; height: 0;
border-left: 36px solid transparent;
border-right: 36px solid transparent;
border-bottom: 26px solid #f5b301;
top: 8px; left: -36px; transform: rotate(-72deg);
}