如何使用伪元素制作这两个边框

Question

大家好，我正在尝试使用以下块来做那些边框：之后和：伪元素之前，按钮同样的事情，但我坚持它。我猜它应该以某种方式完成边框宽度，你能不能帮助我请带它？

Answer 1

我刚创建了像你的共享图像。希望这对你有用..

    Console log is as follows :
    jquery.js:6 Uncaught TypeError: Illegal invocation
    at o (jquery.js:6)
    at gn (jquery.js:6)
    at gn (jquery.js:6)
    at gn (jquery.js:6)
    at gn (jquery.js:6)
    at Function.x.param (jquery.js:6)
    at Function.ajax (jquery.js:6)
    at init (common.js:209)
    at init.$.fn.visExecution (common.js:586)
    at init.load_module (common.js:371)

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