纯 CSS 绘制图形(各种形状的砖石)
《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制数学中的各种形状的砖石等。
Infinity
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Diamond Square
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
Diamond Shield
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
Diamond Narrow
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
Cut Diamond
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
【纯 CSS 绘制图形(各种形状的砖石)】相关文章
6. 纯 CSS 绘制各种图形
7. CSS 设置鼠标显示形状
8. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形
9. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形
10. HTML5每日一练之Canvas标签的应用-绘制线性渐变图形
本文来源:https://www.51html5.com/a3487.html
﹝纯 CSS 绘制图形(各种形状的砖石)﹞相关内容
- JointJS:可与Visio相媲美的开源在线制图工具
- CSS里的各种水平垂直居中基础写法心得
- Magic CSS3 – 创建各种神奇的交互动画效果
- CSS3 HTML5实例二(图形化边界)
- Chrome实验网站:各种新奇事物让你爱不释手
- 2014年各种编程语言的薪资和市场需求
- 用CSS3绘制新浪微博logo
- CSS3绘制的腾讯QQ企鹅Logo
- [视频]纯CSS3腾讯QQ企鹅(附绘制过程)
- HTML5的互动股票图形数据HumbleFinance