Css Maske Shaping & Border

Question

Ich frage mich, ob es mir möglich ist, diese Form rein mit CSS zu machen?

Ich versuche es mit Bildmaske, aber das Problem war die Grenze so gehe ich auf und versuche, mit dem Hintergrundbild Lösung, aber das Problem war die Hintergrund-Größe von verschiedenen Geräten, da wird es Text in der Box enthalten sein .

Ich frage mich, ob irgendwelche ähnliche Form oder wenn es irgendwelche empfohlenen Techniken, die ich wissen müssen, ich würde geschätzt werden.

Vielen Dank im Voraus.

Answer 1

Hier ist eine Arbeitsdemo einer Möglichkeit, diese Form mit nur CSS und ohne Bilder zu erreichen. Ich habe ein Pseudo-Element hinzugefügt und es absolut positioniert.

Denken Sie daran, dass, wenn Ihr Körper Hintergrund eine andere Farbe ist, müssen Sie die Farbe in der ::before ändern, um die Illusion zu halten.

Lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben.

#box { 
 
    height: 100px; 
 
    background: #f7f7f7; 
 
    border: 2px solid #e4e4e4; 
 
    border-radius: 10px; 
 
    position: relative; 
 
} 
 

 
#box::before { 
 
    background: white; 
 
    content: ''; 
 
    position: absolute; 
 
    top: -2px; 
 
    left: -2px; 
 
    width: 35px; 
 
    height: 30px; 
 
    border-radius: 0 0 20px 0; 
 
    border-right: 2px solid #e4e4e4; 
 
    border-bottom: 2px solid #e4e4e4; 
 
}

<div id="box"></div>