HTML: Schneiden Sie die Grenze Kanten

Question

Ich versuche, das Design im Bild

Ich habe versucht, zu replizieren, um es mit border-radius Eigenschaft getan, aber war nicht in der Lage es genau zu replizieren.

Answer 1

Sie könnten einen Hintergrundgradienten verwenden, um dies zu erreichen:

.border-red-bottom { 
 
    color: white; 
 
    background: red; 
 
    padding: 10px 10px 40px; 
 
    width: 300px; 
 
    position: relative; 
 
    background: linear-gradient(-3deg, #fff 0%,#fff 40%,#f00 41%,#f00 41%,#f00 100%); 
 
}

<div class="border-red-bottom">Notifications</div>

Answer 2

Fügen Sie diese auf Ihrem roten Element:

clip-path: polygon(0 80%, 100% 80%, 100% 93%, 0% 100%); 

Sie die Werte anpassen können, wenn der Winkel für Sie nicht perfekt ist.

Answer 3

ich die beste Art und Weise denken, dies zu erreichen, mit einem clip-path ist.

Ich habe ein Beispiel wie das funktioniert, aber es ermöglicht grundsätzlich, einen Teil des Elements mit Formen zu verstecken, in diesem Fall ein Polygon.

Sie die vier Punkte des Polygons bieten,

0 0 oben links

100% 0 oben rechts

100% 48% etwa auf halbem Weg nach unten rechts

0 100% Boden

links

div { 
 
    background-color: red; 
 
    color: white; 
 
    width:300px; 
 
    height: 40px; 
 
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 48%, 0 100%); 
 
    clip-path: polygon(0 0, 100% 0, 100% 48%, 0 100%); 
 
    padding:10px 0 0 10px; 
 
}

<div>test</div>