CSS: Zeichnen verzerrt Grenzen

Question

Ich mache Website für meinen Freund und jetzt weiß ich nicht, wie etwas in CSS zu zeichnen.

I want this

Ich weiß, wie diese zeichnen in „Aktuelno“, aber ich weiß nicht, wie die untere Grenze zu schaffen, die mehr Breite und schräge Seiten hat. Entschuldigung, wenn ich dich nicht gut erklärt habe, aber du wirst es verstehen, wenn du ein Foto siehst.

Ich hoffe, dass Sie mir helfen :)

Answer 1

Meine Abhilfe Vorschlag mit Steigungen:

html { 
 
    height: 100%; 
 
    background-image: linear-gradient(pink, white); 
 
} 
 

 
*, *::before, *::after { 
 
    box-sizing: border-box; 
 
} 
 

 
div { 
 
\t height: 150px; 
 
\t width: 300px; 
 
    margin-left: 50px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
div::before, div::after { 
 
    content: ''; 
 
    display: block; 
 
    height: 149px; 
 
    width: 50px; 
 
} 
 

 
div::before { 
 
    float: left; 
 
    margin-left: -50px; 
 
    background-image: linear-gradient(-71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px), 
 
        linear-gradient(to top, black, black 1px, transparent 1px); 
 
    
 
} 
 

 
div::after { 
 
    float: right; 
 
    margin-right: -50px; 
 
    background-image: linear-gradient(71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px), 
 
        linear-gradient(to top, black, black 1px, transparent 1px);; 
 
}

<div></div>

Und hier ist mein Versuch, die Lösung zu übernehmen, die durch erwähnt wurde @ Harry:

body { 
 
    background: lightblue; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: rgba(100,100,100,.15); 
 
    height: 300px; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    font-size: 3em; 
 
} 
 
.container::after { 
 
    position: absolute; 
 
    display: block; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 95%; 
 
    top: -2.5%; 
 
    padding: 0 50px; 
 
    margin-left: -50px; 
 
    border: 1px solid black; 
 
    -webkit-transform: perspective(50px) rotateX(2deg); 
 
    -moz-transform: perspective(50px) rotateX(2deg); 
 
    transform: perspective(50px) rotateX(2deg); 
 
}

<div class='container'> 
 
    Content Goes Here 
 
</div>

Aber ich denke, dass die robuste Lösung kann mit SVG erreicht werden.