Wie diese beiden Grenzen mit pseudo-Elementen

Question

Hallo Jungen zu machen, ich versuche mit diesen Grenzen für Block zu tun: nach und: vor Pseudo-Elementen, die gleiche Sache für Knopf, aber mich darauf stecken .Ich denke es sollte irgendwie mit Randbreite gemacht werden, könntest du mir bitte damit helfen?

Answer 1

Ich habe gerade etwas wie Ihr geteiltes Bild erstellt. Hoffe, dass dies für u arbeiten ..

.outer-section{ 
 
    background:#fdefe0; 
 
    width:200px; 
 
    height:400px; 
 
    border: 1px solid #c7bcaf; 
 
    border-radius:8px; 
 
    position:relative; 
 
    margin:30px; 
 
} 
 

 
.outer-section:before { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 5px solid #fdefe0; 
 
    content: ""; 
 
    top: -4px; 
 
    z-index: 2; 
 
} 
 
.outer-section:after { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 5px solid #c7bcaf; 
 
    content: ""; 
 
    top: -5px; 
 
    z-index: 1; 
 
} 
 

 
.inner-section { 
 
    background: transparent; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.inner-section:before { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    border-top: 5px solid #fdefe0; 
 
    content: ""; 
 
    bottom: 1px; 
 
    z-index: 2; 
 
} 
 
.inner-section:after { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    border-top: 5px solid #c7bcaf; 
 
    content: ""; 
 
    bottom: 0; 
 
    z-index: 1; 
 
} 
 

 
.white-bg { 
 
    background: #fff; 
 
    height: 350px; 
 
    margin: 5px; 
 
} 
 

 
.button-section { 
 
    background: #e88d1c; 
 
    position: relative; 
 
    margin: 5px; 
 
    border-bottom-right-radius: 8px; 
 
    border-bottom-left-radius: 8px; 
 
    padding: 10px 0; 
 
} 
 

 
.button-section:before { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 100px solid transparent; 
 
    border-right: 86px solid transparent; 
 
    border-top: 5px solid #e88d1c; 
 
    content: ""; 
 
    bottom: -5px; 
 
    z-index: 2; 
 
} 
 

 
.button-innner { 
 
    background: #fff; 
 
    height: 10px; 
 
    width: 40%; 
 
    margin: auto; 
 
}

<div class="outer-section"> 
 
<div class="inner-section"> 
 
    <div class="white-bg"> 
 
    
 
    </div> 
 
    <div class="button-section"> 
 
    <div class="button-innner"> 
 
    
 
    </div> 
 
    </div> 
 
</div> 
 
</div>