CSS3-border绘图制作五角星
2016-09-21 17:44
337 查看
原理
五角星
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue;
五角星
#star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; }
相关文章推荐
- 制作图片边框:《CSS3 Border-image》
- 巧用CSS3 border制作图片遮罩效果
- 利用这个几何绘图软件可以制作旋转的五角星
- 制作圆角:《CSS3 Border-radius》
- 利用css3制作3D样式按钮
- 分享adobe公司制作的基于html5+css3制作的网页
- 一款非常棒的纯CSS3 3D菜单演示及制作教程
- 20个很酷的CSS3导航菜单制作教程
- 使用border制作的css三角形
- css3-border-radius-机器猫
- CSS3 参考指南:CSS3 圆角(border-radius)详解
- css3中的制作动画小总结
- 10 个很棒的 CSS3 按钮制作教程和例子
- CSS3制作精美日历
- CSS3制作日历
- 推荐7个 CSS3 制作的创意下拉菜单效果
- 控制边框颜色:《CSS3 Border-color》
- 使用CSS3制作简单的图形运动变换
- CSS3圆角详解:border-radius