html – 用边框制作切角

概述我想在html中创建一个具有截断角和形状边界线的形状. 我可以制作没有边框的截断形状,如下所示： HTML： <div class="cut-off"></div> CSS： .cut-off{ position:relative; top:400px; left:400px; height:155px; width:200px; background:red; 我想在HTML中创建一个具有截断角和形状边界线的形状.

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

HTML：

<div ></div>@H_403_7@  
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;}@H_403_7@  
Jfiddle here
  
现在我想要一个围绕形状的边框.
我该怎么做？
  
我想要一个像这样的形状：
  
充满了色彩.
解决方法 通过改变你的HTML结构,我可以制作  this      
<div ></div><div ></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;}@H_403_7@  
基本上它在现有的div下增加了另一个div.对于切割效果,它使用边框尺寸.
  
编辑：我还提供了一种在该地区包含内容的方式.
                  总结       
以上是内存溢出为你收集整理的html – 用边框制作切角全部内容，希望文章能够帮你解决html – 用边框制作切角所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1134738.html