Ergebnis

[Julia]

Hallo,

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.

Danke für den Tipp mit calc, dieses funktioniert wunderbar. Hab es meinem Beispiel hinzugefügt: http://codepen.io/anon/pen/bpyLyy

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. Interessant für Dich könnte auch sein, als Maß für die Positionierung em zu verwenden, dann ist der Zusammenhang zwischen Größe und Position deutlicher.

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;
}

Hmm, wenn ich deinen Code nehme, erhalte ich eine zweite Route irgendwo ziemlich weit unten :) Ich dachte ich füge hier einfach zwei divs ein und gebe diesem dann ein Border-Bottom und in das Div packe ich das Copyright?