Ergebnis
bearbeitet von Rolf bSehr schön :)
Die Zentrierung erreichst Du, indem Du das footer::after mit
left: calc(50% - 6.5em)
platzierst (Leerstellen um das Minuszeichen sind relevant!). Das funktioniert deshalb, weil das Quadrat erst platziert (mit linkem Rand auf 50% - halbe Breite) und dann um seinen Mittelpunkt gedreht wird.
Wenn Du jetzt auch noch die beiden Striche erzeugen willst, wird die Sache spannend, weil du genau zwei Schuss hast: ::before und ::after. Zweimal ::before oder zweimal ::after funktioniert nicht an einem Element. Eine Idee könnte sein, die Raute als ::after der .team Section zu setzen und über bottom zu positionieren. z-index:1 muss sein weil es sonst hinter dem Footer verschwindet.
section.team::after {
content: " "; z-index: 1;
width: 13em; height: 13em;
background-color: #efefef;
transform: rotate(45deg);
position: absolute;
bottom: -6em; left: calc(50% - 6.5em);
border-radius: 1em;
}
Gruß
Rolf
Ergebnis
bearbeitet von Rolf bSehr schön :)
Die Zentrierung erreichst Du, indem Du das footer::after mit
left: calc(50% - 6.5em)
platzierst (Leerstellen um das Minuszeichen sind relevant!). Das funktioniert deshalb, weil das Quadrat erst platziert (mit linkem Rand auf 50% - halbe Breite) und dann um seinen Mittelpunkt gedreht wird.
Wenn Du jetzt auch noch die beiden Striche erzeugen willst, wird die Sache spannend, weil du genau zwei Schuss hast: ::before und ::after. Zweimal ::before oder zweimal ::after funktioniert nicht. Eine Idee könnte sein, die Raute als ::after der .team Section zu setzen und über bottom zu positionieren. z-index:1 muss sein weil es sonst hinter dem Footer verschwindet.
section.team::after {
content: " "; z-index: 1;
width: 13em; height: 13em;
background-color: #efefef;
transform: rotate(45deg);
position: absolute;
bottom: -6em; left: calc(50% - 6.5em);
border-radius: 1em;
}
Gruß
Rolf
Ergebnis
bearbeitet von Rolf bSehr schön :)
Die Zentrierung erreichst Du, indem Du das footer::after mit
left: calc(50% - 6.5em)
platzierst (Leerstellen um das Minuszeichen sind relevant!). Das funktioniert deshalb, weil das Quadrat erst platziert (mit linkem Rand auf 50% - halbe Breite) und dann um seinen Mittelpunkt gedreht wird.
Wenn Du jetzt auch noch die beiden Striche erzeugen willst, wird die Sache spannend, weil du genau zwei Schuss hast: ::before und ::after. Zweimal ::before oder zweimal ::after funktioniert nicht. Eine Idee könnte sein, die Raute als ::after der .team Section zu setzen. z-index:1 muss sein weil es sonst hinter dem Footer verschwindet.
section.team::after {
content: " "; z-index: 1;
width: 13em; height: 13em;
background-color: #efefef;
transform: rotate(45deg);
position: absolute;
bottom: -6em; left: calc(50% - 6.5em);
border-radius: 1em;
}
Gruß
Rolf
Ergebnis
bearbeitet von Rolf bSehr schön :)
Die Zentrierung erreichst Du, indem Du das footer::after mit
left: calc(50% - 6.5em)
platzierst (Leerstellen um das Minuszeichen sind relevant!). Das funktioniert deshalb, weil das Quadrat erst platziert (mit linkem Rand auf 50% - halbe Breite) und dann um seinen Mittelpunkt gedreht wird.
Wenn Du jetzt auch noch die beiden Striche erzeugen willst, wird die Sache spannend, weil du genau zwei Schuss hast: ::before und ::after. Zweimal ::before oder zweimal ::after funktioniert nicht.
Gruß
Rolf
Ergebnis
bearbeitet von Rolf bSehr schön :)
Die Zentrierung erreichst Du, indem Du das footer::after mit
left: calc(50% - 6.5em)
platzierst (Leerstellen um das Minuszeichen sind relevant!). Das funktioniert deshalb, weil das Quadrat erst platziert (mit linkem Rand auf 50% - halbe Breite) und dann um seinen Mittelpunkt gedreht wird.
Gruß
Rolf