我想在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.对于切割效果,它使用边框尺寸.
编辑:我还提供了一种在该地区包含内容的方式.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。