使用伪元素的CSS边框问题[重复]答案

【问题标题】：CSS Border problems using pseudo elements [duplicate]使用伪元素的CSS边框问题[重复]
【发布时间】：2017-04-22 04:06:03
【问题描述】：

我创建了一个破碎的边框效果，但我不希望边框末端的锐利外观我希望它被框掉。我已经搞砸了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>

【问题讨论】：

标签： css pseudo-element

【解决方案1】：

改为这样做，边框不会变尖

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

我还把高度比设置的 10px 多一点，降低到 30px (height: calc(100% - 30px);)

堆栈sn-p

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

【讨论】：