css3做尖角的方法：首先创建一个HTML示例文件；然后确定尖角的位置；最后通过给指定div设置属性为“top:6px;left:-3px;border-top:0px;border-bottom…”来实现尖角效果即可。
本教程操作环境：windows7系统、css3版、thinkpad t480电脑。
推荐：《css视频教程》
尖角在上面
效果图：
代码：
尖角p #top{ width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative;}.sp1,.sp2{ display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0;}.sp1{ top:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */ left:40px; /* 它来确定尖角的位置 */ border-top:0px; border-bottom:6px solid black; /* 注意颜色的变化 */ border-right:6px solid white; border-left:6px solid white;}.sp2{ top:6px; /* 是自身边框宽度的2倍 */ left:-3px; /* 是自身边框宽度的-1倍 */ border-top:0px; border-bottom:3px solid white; border-right:3px solid black; border-left:3px solid black;}
尖角在下面
效果图：
代码：
尖角p #bottom{ width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative;}.sp1,.sp2{ display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0;}.sp1{ bottom:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */ left:40px; /* 它来确定尖角的位置 */ border-bottom:0px; border-top:6px solid black; /* 注意颜色的变化 */ border-right:6px solid white; border-left:6px solid white;}.sp2{ bottom:6px; /* 是自身边框宽度的2倍 */ left:-3px; /* 是自身边框宽度的-1倍 */ border-bottom:0px; border-top:3px solid white; border-right:3px solid black; border-left:3px solid black;}
尖角在左边
立即学习“前端免费学习笔记（深入）”；
效果图：
代码：
尖角p #left{ width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative;}.sp1,.sp2{ display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0;}.sp1{ left:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */ top:40px; /* 它来确定尖角的位置 */ border-left:0px; border-top:6px solid white; /* 注意颜色的变化 */ border-right:6px solid black; border-bottom:6px solid white;}.sp2{ left:6px; /* 是自身边框宽度的2倍 */ top:-3px; /* 是自身边框宽度的-1倍 */ border-left:0px; border-top:3px solid black; border-right:3px solid white; border-bottom:3px solid black;}
尖角在右边
效果图：
代码：
尖角p #right{ width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative;}.sp1,.sp2{ display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0;}.sp1{ right:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */ top:40px; /* 它来确定尖角的位置 */ border-right:0px; border-top:6px solid white; /* 注意颜色的变化 */ border-bottom:6px solid white; border-left:6px solid black;}.sp2{ right:6px; /* 是自身边框宽度的2倍 */ top:-3px; /* 是自身边框宽度的-1倍 */ border-right:0px; border-top:3px solid black; border-bottom:3px solid black; border-left:3px solid white;}
以上就是css3如何做 尖角的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1616591.html
微信扫一扫 
支付宝扫一扫 
