如何用伪元素制作这两个边框[关闭]答案

【问题标题】：How to make those two borders with pseudo-elements [closed]如何用伪元素制作这两个边框[关闭]
【发布时间】：2017-02-01 05:03:39
【问题描述】：

大家好，我正在尝试使用 :after 和 :before 伪元素为块设置边框，按钮也一样，但我坚持使用它。我想应该以某种方式使用边框宽度，你能帮忙吗请给我好吗？

【问题讨论】：

到目前为止你做了什么？向我们展示您的代码。

标签： css sass pseudo-element

【解决方案1】：

我刚刚创建了类似于您的共享图像的东西。希望这对你有用..

.outer-section{
  background:#fdefe0;
  width:200px;
  height:400px;
  border: 1px solid #c7bcaf;
  border-radius:8px;
  position:relative;
  margin:30px;
}

.outer-section:before {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 5px solid #fdefe0;
    content: "";
    top: -4px;
    z-index: 2;
}
.outer-section:after {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 5px solid #c7bcaf;
    content: "";
    top: -5px;
    z-index: 1;
}

.inner-section {
    background: transparent;
    height: 100%;
    position: relative;
}

.inner-section:before {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 5px solid #fdefe0;
    content: "";
    bottom: 1px;
    z-index: 2;
}
.inner-section:after {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 5px solid #c7bcaf;
    content: "";
    bottom: 0;
    z-index: 1;
}

.white-bg {
    background: #fff;
    height: 350px;
    margin: 5px;
}

.button-section {
    background: #e88d1c;
    position: relative;
    margin: 5px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    padding: 10px 0;
}

.button-section:before {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 86px solid transparent;
    border-top: 5px solid #e88d1c;
    content: "";
    bottom: -5px;
    z-index: 2;
}

.button-innner {
    background: #fff;
    height: 10px;
    width: 40%;
    margin: auto;
}

<div class="outer-section">
 <div class="inner-section">
  <div class="white-bg">
  
  </div>
  <div class="button-section">
  <div class="button-innner">
  
  </div>
  </div>
 </div>
</div>

【讨论】：

嗨，感谢您的解决方案。顺便说一句，是否也可以做出响应？
这里是更新的小提琴。我响应我已经给出了百分比格式的值fiddle.jshell.net/de23bsyy