如何用css3画三角形和一个圆形
2018-11-01 来源：学做网站论坛
通过CSS样式可以控制网页中各个元素的显示方式，通过CSS样式可以在网页中画出一个三角形，圆形等形状。（了解更多CSS知识，请学习CSS视频教程）
CSS画三角形方法
1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。
<div></div>
2、把它的宽高设置为height:0px; width:0px;
3、设置边框border属性，用来实现三角形。
首先要了解border具体是怎么样的，我写了一个这样的样式：
border:50px solid #000; border-color:#f00 #000 #f0f #00f;
出现4个三角形合并成一个正方形。到这里就很清晰了，只要把想要的保留，其它的设置为透明就可以达到三角形的效果，那么：
border:50px solid #000; border-color:#f00 transparent transparent transparent;
也可以设置Transitions属性来形成一个倾斜的三角形，如下图：
CSS画圆形方法
CSS画圆形，只需要通过设置DIV的圆角边框即可。代码如下：
border-rsdius:78.5px 78.5px 78.5px 78.5px;
接下来用padding控制半径：padding:50px;还可以根据自己喜好设置背景色和边框。效果如下：
CSS画圆的CSS样式：
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐