我想在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;
}
现在我想要一个围绕形状的边框.
我该怎么做？
我想要一个像这样的形状：
充满了色彩.
解决方法
通过改变你的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.对于切割效果,它使用边框尺寸.
编辑：我还提供了一种在该地区包含内容的方式.
