Rysunek 45 Kąt nachylenia z CSS3

Question

Próbuję narysować kąt 45 stopni za pomocą CSS, pierwszy obraz jest tym, co próbuję osiągnąć, drugi to, co udało mi się. Nie mogę wymyślić, jak wyciąć zewnętrzną stronę kąta o kolejne 45 stopni (patrz przerywana czerwona linia).

.flick .text { 
 
    position: relative; 
 
    z-index: 50; 
 
} 
 
.flick { 
 
    background-color: #055468; 
 
    color: white; 
 
    margin-left: 140px; 
 
    padding: 15px; 
 
} 
 
.flick:before { 
 
    background: #055468; 
 
    content: ""; 
 
    height: 100px; 
 
    margin: -65px 0 0 -90px; 
 
    position: absolute; 
 
    transform: skew(45deg); 
 
    width: 80px; 
 
}

<div class="flick"><span class="text">Hello world</span></div>

Answer 1

Należy użyć rotate zamiast skew do tego. Zmieniłem również pozycję elementu :before, tak aby jego dolny prawy róg ustawił się w lewym dolnym rogu klasy flick, a następnie ustaw transform origin na współdzielonym rogu, tworząc dokładnie pożądany efekt (również przesunąłem go z top więc efekt będzie widoczny):

.flick .text { 
 
    position: relative; 
 
    z-index: 50; 
 
} 
 
.flick { 
 
    margin-top: 200px; 
 
    background-color: #055468; 
 
    color: white; 
 
    margin-left: 140px; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 
.flick:before { 
 
    background: #055468; 
 
    content: ""; 
 
    width: 100px; 
 
    height: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 100%; 
 
    transform: rotateZ(45deg); 
 
    transform-origin: bottom right; 
 
    width: 80px; 
 
}

<div class="flick"><span class="text">Hello world</span></div>