使用伪元素的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>