使用僞元素的CSS邊框問題

Question

我已經創建了一個破碎的邊框效果，但我不想在邊框的末端進行銳利的外觀，我希望它可以裝箱。我已經搞砸了border-radius和我所能想到的一切，但不能想到任何事情。任何輸入將不勝感激。

我想它看起來像這樣：

.container{padding-top: 40px;} 
 
a h3{margin-top:0!important;} 
 
.col-sm-15{ 
 
    width: 18%; 
 
    margin:1%; 
 
    height: 4em; 
 
    float:left; 
 
    position:relative; 
 
} 
 
.col-sm-15 .wrap:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: calc(100% - 10px); 
 
    bottom: 0; 
 
    left: 0; 
 
    border: 10px solid transparent; 
 
    border-bottom-color: #330099; 
 
    border-left-color: #330099; 
 
} 
 
.col-sm-15 .wrap:after{ 
 
    content: ''; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: calc(100% - 10px); 
 
    top: 0; 
 
    right: 0; 
 
    border: 10px solid transparent; 
 
    border-top-color: #330099; 
 
    border-right-color:#330099; 
 
} 
 
a h3{ 
 
    font-size: 20px; 
 
    color: #000000; 
 
    padding: 10px; 
 
    margin-top: 3.2em; 
 
} 
 
a:hover{text-decoration: none;} 
 
a:hover h3{color: #330099;}

<section id="funnnels"> 
 
<div class="container"> 
 
    <div class="row padd"> 
 
    
 
    <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
     <div class="wrap"> 
 
      <h3>Option 1</h3> 
 
     </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
    </div> 
 
    <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
     <div class="wrap"> 
 
      <h3>option 2</h3> 
 
     </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
    </div> 
 
    <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
     <div class="wrap"> 
 
      <h3>option 3</h3> 
 
     </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
    </div> 
 
    <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
     <div class="wrap"> 
 
      <h3>option 4</h3> 
 
     </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
    </div> 
 
    <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
     <div class="wrap"> 
 
      <h3>option 5</h3> 
 
     </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</section>

Answer 1

不喜歡這樣，而不是與邊界沒有得到一個尖底

border-bottom: 10px solid #330099; 
border-left: 10px solid #330099; 

我也降低了高度比設定10px的多一點，以30像素（height: calc(100% - 30px);）

堆棧片斷

.container { 
 
    padding-top: 40px; 
 
} 
 

 
a h3 { 
 
    margin-top: 0!important; 
 
} 
 

 
.col-sm-15 { 
 
    width: 18%; 
 
    margin: 1%; 
 
    height: 4em; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.col-sm-15 .wrap:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: calc(100% - 30px); 
 
    bottom: 0; 
 
    left: 0; 
 
    border-bottom: 10px solid #330099; 
 
    border-left: 10px solid #330099; 
 
} 
 

 
.col-sm-15 .wrap:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: calc(100% - 30px); 
 
    top: 0; 
 
    right: 0; 
 
    border-top: 10px solid #330099; 
 
    border-right: 10px solid #330099; 
 
} 
 

 
a h3 { 
 
    font-size: 20px; 
 
    color: #000000; 
 
    padding: 10px; 
 
    margin-top: 3.2em; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
} 
 

 
a:hover h3 { 
 
    color: #330099; 
 
}

<section id="funnnels"> 
 
    <div class="container"> 
 
    <div class="row padd"> 
 

 
     <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
      <div class="wrap"> 
 
      <h3>Option 1</h3> 
 
      </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
     </div> 
 
     <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
      <div class="wrap"> 
 
      <h3>option 2</h3> 
 
      </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
     </div> 
 
     <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
      <div class="wrap"> 
 
      <h3>option 3</h3> 
 
      </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
     </div> 
 
     <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
      <div class="wrap"> 
 
      <h3>option 4</h3> 
 
      </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
     </div> 
 
     <div class="col-sm-15 text-center"> 
 
     <a href="#"> 
 
      <div class="wrap"> 
 
      <h3>option 5</h3> 
 
      </div> 
 
     </a> 
 
     <div class="clearfix"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>