用边框制作切角

Question

我想在html中创建一个具有切角并且在形状周围有边框的形状.

我可以制作没有边框的截断形状,如下所示:

HTML:

<div class="cut-off"></div>

CSS:

 .cut-off{
   position:relative;
   top:400px;
   left:400px;
   height:155px;
   width:200px;
   background:red;
}
.cut-off:after{
   position:absolute;
   bottom:0px; right:-20px;
   content:".";
   text-indent:-999px; overflow:hidden;
   display:block;
   width:0px; height:0px;
   border-top: 20px solid green;
   border-right: 20px solid transparent;
}
.cut-off:before{
   position:absolute;
   top:0; right:-20px;
   content:"#";
   text-indent:-999px; overflow:hidden;
   display:block;
   background:blue;
   width:20px; height:135px;
} 

Jfiddle在这里

现在我想要一个围绕形状的边框.我该怎么做？

我想要一个像这样的形状:

充满了色彩.

Answer 1

通过稍微改变你的 html 结构，我可以做到这一点

\n\n

<div class="cut-off"></div>\n<div class="cut-off2"></div>\xe2\x80\x8b\n\n\n.cut-off{\nposition: relative;\nwidth: 300px;\nheight: 150px;\nborder-bottom: 80px red solid;\nborder-right: 80px transparent solid;\n}\n\n.cut-off2{\nposition: absolute;\nz-index: -1;\ntop:0;\nleft: 0;\nwidth: 305px;\nheight: 150px;\nborder-bottom: 82px blue solid;\nborder-right: 80px transparent solid;\n}\n\np{\nposition: absolute;\nleft: 0;\nbottom:-40px;\n\n}\n

\n\n

\xe2\x80\x8b

\n\n

基本上它在现有的 div 下添加了另一个 div。对于截止效果，它会使用边框尺寸。

\n\n

编辑：我还提供了一种将内容包含在该区域中的方法。

\n