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; 

Iはまた、（height: calc(100% - 30px);）

スタックはスニペット30pxに、セット10pxのより少し高さを低減

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