CSS3---绘制六边形
2016-03-18 11:37
597 查看
#hexagon { width: 100px; height: 55px; background: red; position: relative; } #hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } #hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }
相关文章推荐
- css实现强制不换行/自动换行/强制换行
- 学习随笔----css盒子模型
- CSS 盒子模型(Box model)中的 padding 与 margin
- 如何优雅地制作精排 ePub —— 个人电子书制作规范及基本样式表
- CSS3属性:width:fit-content 水平居中
- 带清空按钮TextBox的实现(WPF)
- CSS 实现 textArea 的 placeholder 换行
- CSS魔法堂:hasLayout原来是这样!
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
- CSS3(五)——选择器
- CSS3(四)——结构性伪类选择器(2)
- koala 编译scss不支持中文解决方案
- 父元素与子元素之间的margin-top问题(css hack)
- CSS3(三)——结构性伪类选择器(1)
- CSS3(二)——属性选择器
- CSS3(一)
- css 未知尺寸元素水平垂直居中(只针对inline,inline-block,table-cells)
- DIV+CSS规范命名大全集合
- CSS笔试题
- HTML中引入CSS样式有几种形式?