使用伪元素的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略微减少到30px（height: calc(100% - 30px);）

Stack snippet

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;