In einem früheren Blogpost meines Frontend-Kollegens Stefans hat er euch gezeigt wie man Dreiecke mit CSS erzeugen kann. Ich möchte heute einen Schritt weitergehen und euch zeigen, wie man aus diesen Dreiecken ein Stern erzeugen kann.
Der Stern besteht aus zwei einfachen Dreiecken, die übereinandergelegt werden. Ein Div element erzeugt das erste Dreiecke. Das Pseudoelement :after erzeugt das zweite. Mit Position absolute und der passenden Positionsangabe entsteht so das Dreieck.
div.stern {
position: relative;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #F18E18;
}
div.stern:after {
position: absolute;
top: 15px;
left: -25px;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid #F18E18;
content: "";
}