CSS negatives Dreieck mit umgekehrter gerundeter Ecke

Question

Hallo, ist es möglich, ein Dreieck mit umgekehrter gerundeter Ecke in der Mitte eines Rechtecks ​​zu erstellen, wie auf vielen Zielseiten. So etwas wie das Bild unten:

ich etwas ähnliches hier aber ohne invertiert abgerundete Ecke CSS Inverted Triangle image overlay

Answer 1

Ja gefunden, es ist möglich, diesen Effekt zu erzielen, indem zwei Pseudo-Elemente. Wir müssen eines der Pseudoelemente in Bezug auf die linke Seite des Containers positionieren, während das andere in Bezug auf die rechte Seite des Containers positioniert wird. Dann fügen Sie eine transform: skew() in entgegengesetzten Richtungen hinzu und weisen den erforderlichen Seiten einen Rand-Radius zu, um die gewünschte Ausgabe zu erhalten.

div { 
 
    position: relative; 
 
    height: 50px; 
 
    width: 100%; 
 
    padding-top: 50px; 
 
    background: blue; 
 
    background-clip: content-box; 
 
    /* make sure blue background doesn't appear behind triangle */ 
 
    overflow: hidden; 
 
    color: white; 
 
} 
 
div:before, 
 
div:after { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0; 
 
    width: calc(50% + 10px); 
 
    /* don't change */ 
 
    height: 50px; 
 
    /* must be equal to padding-top */ 
 
    background: blue; 
 
} 
 
div:before { 
 
    left: 0; 
 
    transform: skew(45deg); 
 
    transform-origin: right bottom; 
 
    border-top-right-radius: 12px; 
 
} 
 
div:after { 
 
    right: 0; 
 
    transform: skew(-45deg); 
 
    transform-origin: left bottom; 
 
    border-top-left-radius: 12px; 
 
}

<div class='shape'>This is a shape.</div>