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揭秘》第三章的切角效果
回答7:就是利用伪类 然后给大小为0, 边框加上像素就是了,多试一下
相关文章:
1. php laravel框架模型作用域2. javascript - H5下拉能更换页面么 怎么实现 在左右滑的页面中3. angular.js - 有人看过Angular即学即用这本书吗4. ubuntu apt-get install update 无法更新5. java - 当系统出现线程死锁时怎么处理?6. vue计算属性怎么样与for结合使用7. 记不住代码有什么好的方法吗?8. angular.js - form 表单,点击提交按钮 判断ng-checked 已选中9. angular.js - 关于指令link 中的创建变量问题10. vue.js - vue上传代码到git