html - 带有边界的切 Angular

我想在html中制作一个具有截止 Angular 并在该形状周围带有边界线的形状。

我可以制作没有边界的截止形状，如下所示:

的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 here

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

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

充满色彩。

最佳答案

通过稍微改变您的html结构，我可以制作this

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


.cut-off{
position: relative;
width: 300px;
height: 150px;
border-bottom: 80px red solid;
border-right: 80px transparent solid;
}

.cut-off2{
position: absolute;
z-index: -1;
top:0;
left: 0;
width: 305px;
height: 150px;
border-bottom: 82px blue solid;
border-right: 80px transparent solid;
}

p{
position: absolute;
left: 0;
bottom:-40px;

}

基本上，它会在现有的div之下添加另一个div。对于cuttof效果，它具有边框尺寸。

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

关于html - 带有边界的切 Angular ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14093619/