如何使用CSS创建带角度角的盒子？

Question

我正在尝试创建一个带有倾斜角和黑色边框的框，如下图所示：

这可以用CSS完成吗？

编辑：为什么下来投票？如果你们想要我试过的证据，你就去吧。

HTML

<article>
     <span class="top-corners"></span>
     (the content)
     <span class="bottom-corners"></span>
</article>

CSS

.top-corners:before, .top-corners:after, .bottom-corners:before, .bottom-corners:after {
  content:"";
  position:absolute
}
.top-corners:before { 
  border-top:5px solid #000;
  border-right:5px solid #000;
  left:0;
  top:0
}
.top-corners:after { 
  border-top:5px solid #000;
  border-left:5px solid #000;
  right:0;
  top:0
}
.bottom-corners:before {
  border-bottom:5px solid #000;
  border-right:5px solid #000;
  bottom:0;
  left:0
}
.bottom-corners:after {
  border-bottom:5px solid #000;
  border-left:5px solid #000;
  bottom:0;
  right:0
}

Answer 1

你可以尝试像this

那样做

HTML

<div class="outer">
    <div class="inner"></div>
</div>

CSS

.outer {
  position: relative;
   width: 500px;
}
.inner {
  height: 200px;
  border: 3px solid #000;
}
.outer:before,
.outer:after,
.inner:before,
.inner:after {
  position: absolute;
  background: #fff;
  content: " ";
  display: block;
  height: 30px;
  width: 30px;
   border-left: 3px solid #000;
}
.outer:before {
     left: -15px;
     top: -15px;
    transform: rotate(-135deg);  
}
.outer:after {
    right: -15px;
    top: -15px;
    transform: rotate(-45deg); 
}
.inner:before {
    left: -15px;
    bottom: -15px;
    transform: rotate(135deg); 
}
.inner:after {  
    right: -15px;
    bottom: -15px;
    transform: rotate(45deg);
}