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

堆栈片段

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

CSS 使用伪元素的边框问题

CSS Border problems using pseudo elements

css

pseudo-element