admin 管理员组文章数量: 887021
html5绘制基本图形代码,CSS
最近被问到如何用CSS绘制一个圆，解决这个问题的同时引发了我对CSS绘制图形的兴趣。今天汇总一下CSS绘制的各种基本图形。
1.正方形
正方形是最简单的图形了，只需要宽高一致就可以绘制出来。
// css
.square{
width: 100px;
height: 100px;
border: 1px solid black;
}
//html
正方形
2.圆形
圆形主要用到了border-radius属性。该属性可以控制圆角的形状。该属性是四个属性的集合，和padding类似。
举个栗子：
border-radius: 2px;
等同于：
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
//css
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid black;
}
//html
圆形
3.椭圆形
椭圆形也是利用了border-radius属性，只是使用了两个值分别指定x轴和y轴的弯曲情况。
border-radius: 50% / 50%;
前一个值指定x轴，后一个值指定y轴。如果第二个值为空会使用第一个值。利用这两个值可以画出不同曲率的椭圆。
//css
.oval{
width: 150px;
height: 100px;
border-radius: 75px / 50px;
border: 1px solid black;
}
//html
椭圆
4.普通三角形
利用transparent设置两条边框为透明，一条有边框。最后的一条边不设置宽度，就形成了三角形。说着糊涂，直接show code：
//css
.triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
}
//html
三角形
利用这种方式可以绘制出各种方向的三角形，包括直角三角形。具体用法可以参考.htm
5.等边三角形
思路是利用三个div的边框来拼成一个三角形，只需要调整好左右两个div的旋转角度，就能生成一个等边三角形。后来发现可以使用伪类来实现三个div的效果。代码如下：
// css
.box{
border-bottom:1px solid #030303;
width:100px;
height:100px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.box:before,.box:after{
content:"";
display: block;
width:100px;
height:100px;
box-sizing: border-box;
position: absolute;
}
.box:before{
border-left:1px solid #030303;
transform-origin: left bottom;
transform: rotate(30deg);
}
.box:after{
border-bottom:1px solid #030303;
transform: rotate(60deg);
transform-origin: right bottom;
}
//html
等边三角形
6.平行四边形
一种思路是使用一个矩形的div和两个三角形拼接来形成平行四边形，当然可以使用伪类，这样就不用使用三个元素了。
另一种是使用skew属性。
举个栗子：
//css
.parallelogram {
display: inline-block;
padding: 50px 100px;
border: 1px solid black;
transform: skew(-20deg);
}
//html
平行四边形
关于CSS绘制简单图形就先说到这里，如果以后有其他有意思的图形或者绘制方式再和大家分享~~
本文标签： html5绘制基本图形代码 css
版权声明：本文标题：html5绘制基本图形代码,CSS 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1697826892h275604.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论