의사 요소

Question

안녕 사람들과 함께 두 경계로 만들려면, 내가 가진 블록 그 국경을하려고 : 이후 : 의사 요소, 버튼 같은 일을하지만, 전에 내가 거기에 붙어 . 여하튼 국경 너비로 끝내야한다고 생각합니다. 제발 도와 주실 수 있습니까?

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>