擬似要素

Question

こんにちはみんなでこれら2つの境界を作るためにどのように、私はブロックのために、それらの境界をやろうとしています：後：擬似要素、ボタンの同じことの前に、私はそれに引っかかっ私はそれが何とか境界線の幅で行われる必要がありますね、それで私を助けることができる？

Answer 1

共有画像のようなものを作成しました。あなたはこれまでに何をした？

.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>