html5 - css 这种六边形的边框怎么画？
问题描述
用一个p+css怎么实现？
还这种可以填充颜色的
求代码！
问题解答
回答1：<html> <head> <style> .sixedge{ height: 24px; width: 55px; position:relative; background-color: #FFF; border-top:1px solid green; border-bottom:1px solid green; margin-left:40%; } .sixedge:after{ content: ’’; position: absolute; background-color: transparent; top: 3px; right: -9px; width: 17px; height: 17px; transform: rotate(45deg); -ms-transform: rotate(45eg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); border-top: 1px solid green; border-right: 1px solid green; }.sixedge:before{ content: ’’; position: absolute; background-color: transparent; top: 3px; left: -9px; width: 17px; height: 17px; transform: rotate(45deg); -ms-transform: rotate(45eg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); border-bottom: 1px solid green; border-left: 1px solid green; } </style></head> <body> <p class='sixedge'>six</p> </body> </html>回答2：
最简单的是，拆分成左中右，三块，2个三角形和一个矩形，然后合成，3个p
回答3：链接给你 自己画吧
回答4：<p class='rectangle'>新手</p>.rectangle{
margin:0 auto;width:200px;height:51px;line-height:51px;text-align:center;position:relative;border-top:1px solid #00F;border-bottom:1px solid #00F;
}.rectangle:before{
content:'';position:absolute;top:7px;left:-19px;width:36px;border-top:1px solid #00F;height:36px;border-right:1px solid #00F;transform:rotate(-135deg);
}.rectangle:after{
content:'';position:absolute;top:7px;right:-19px;width:36px;border-top:1px solid #00F;height:36px;border-right:1px solid #00F;transform:rotate(45deg);
}
回答5：@machenchi0207 六边形外框
借用 @machenchi0207 的代码
回答6：CSS3渐变实现切角效果
详情见《css揭秘》第三章的切角效果
就是利用伪类 然后给大小为0， 边框加上像素就是了，多试一下
相关文章：
1. dockerfile - 为什么docker容器启动不了？2. javascript - webapp业务流程基本一致，多套主题（样式基本不一样，交互稍有偏差）管理，并且有不断有新增主题，该如何设计组件化架构？3. javascript - ejs支持if else语法吗4. 请教各位大佬，浏览器点 提交实例为什么没有反应5. macos - mac下docker如何设置代理6. javascript - 用rem写的页面，安卓手机显示文字是正常的，苹果显示的文字是特别小的是为什么呢7. javascript - 移动端，当出现遮罩层的时候，遮罩层里有div是超出高度scroll的，怎么避免滑动div的时候，body跟随滑动？8. javascript - JS设置Video视频对象的currentTime时出现了问题,IE,Edge,火狐,都可以设置,反而chrom却...9. 新手 - Python 爬虫 问题 求助10. javascript - 学习网页开发，关于head区域一段脚本的疑惑
网公网安备