倒角边框不同的容器颜色CSS

Question

我想要实现的目标：

到目前为止，我所做的是使角落好像与容器颜色相同，然后用“假”方块旋转45度覆盖不需要的区域。

我不喜欢那么多结果，尤其是右下角，我不能用另一种方式去做。实现它的最佳方法是什么？是否可以使用渐变来完成？

第一步：http://jsfiddle.net/laxmana/wjaAs/

决赛：http://jsfiddle.net/laxmana/j9NWC/

CSS：

.chamfered-box{
    width: 100%;
    position: relative;
    background: white;
    border: 1px solid #149E4B;
}

.chamfered-box::before, .chamfered-box::after{
    width: 0px;
    height: 0px;
    background: #fff;
    content: '';
    position: absolute;
    bottom: 0;
}

.chamfered-box::after{
    right: -1px;
    bottom: -1px;
    border-top: 10px solid #149E4B;
    border-right: 10px solid white;
    border-left: 10px solid #149E4B;
    border-bottom: 10px solid white;
}

.chamfered-box::before{
    left: -1px;
    top: -1px;
    border-top: 10px solid #149E4B;
    border-right: 10px solid white;
    border-left: 10px solid #149E4B;
    border-bottom: 10px solid white;
}

.ch-top, .ch-bottom{position: absolute;z-index: 5;}

.ch-top{
    top: -16px;
    left: -18px;
    width: 30px;
    height: 30px;
    background: white;
    -webkit-transform: rotate(45deg);
}

.ch-bottom{
    bottom: 5px;
    right: 6px;
    width: 28px;
    height: 28px;
    background: white;
    -webkit-transform: rotate(45deg);
}

.ch-content{
    padding: 20px;
}

HTML：

    <div class="chamfered-box">
      <div class="ch-top"></div>
      <div class="ch-bottom"></div>
      <div class="ch-content">The text</div>
     </div>

Answer 1

您可以使用伪元素并将其旋转到容器的顶部（上方），与您的方法略有不同。

为容器绘制一个嵌入阴影而不是边框​​。

用带边框的白色背景（作为容器）绘制正方形。

旋转方块并隐藏其中一部分从容器中溢出。

<强> DEMO

---

.chamfered-box{
  margin:1em auto;
  width: 440px;
  padding:5px;
  position: relative;
  overflow:hidden;
  background: white;
  box-shadow: inset 0 0 0 1px #149E4B;

}

.chamfered-box::before, .chamfered-box::after{
  width: 20px;
  height: 20px;
  background: #fff;
  content: '';
  position: absolute;
  bottom: 0;
  border: 1px solid #149E4B;  
  transform:rotate(45deg);
}

.chamfered-box::after{
  right: -11px;
  bottom: -11px;

}

.chamfered-box::before{
  left: -11px;
  top: -11px;

}