绘制三角形

• 原理：将宽度、高度设为0，将一边颜色显示出来，其它边颜色设为透明

//纯css绘制向上三角形
#triangle-up { 
 width: 0; 
 height: 0; 
 border-left: 50px solid transparent; 
 border-right: 50px solid transparent; 
 border-bottom: 100px solid red;
}

//纯css绘制向右三角形
#triangle-left { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-right: 100px solid red; 
border-bottom: 50px solid transparent;
}

需要什么方向的三角形，就将其方向设为可见，其它设为transparent，大家可以去试试~~

五角星

• 原理：三个同样三角形拼接而成，利用css3属性的transform旋转

• 接下来，咱来绘制第一个三角形

#star {
margin: 50px auto 0;
position: relative;
display: block;
width: 0;
height: 0;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
border-bottom: 40px solid #c889ff;}

css绘制一个三角形

• 利用伪类，在之前绘制第二个三角形，根据第一个进行旋转，我用笔算了一下，旋转72deg,可达到效果

#star:before {
 position: absolute;
 top:0;
 left:-74px;
 content: '';
 display: block;
 width: 0;
 height: 0;
 border-right: 70px solid transparent;
 border-left: 70px solid transparent;
 border-bottom: 40px solid #c889ff;
 -webkit-transform: rotate(72deg);
 -moz-transform: rotate(72deg);
 -ms-transform: rotate(72deg);
 -o-transform: rotate(72deg);
 transform: rotate(72deg);
}

css绘制第二个三角形

• 第二个三角形绘制出来 ，第三个就迎刃而解了，只要在第二个三角形的基础上，将其反转（旋转-72deg）

#star:after {
 position: absolute;
 top:0;
 left:-70px;
 content: '';
 display: block;
 width: 0;
 height: 0;
 border-right: 70px solid transparent;
 border-left: 70px solid transparent;
 border-bottom: 40px solid #ffb065;
 -webkit-transform: rotate(-72deg);
 -moz-transform: rotate(-72deg);
 -ms-transform: rotate(-72deg);
 -o-transform: rotate(-72deg);
 transform: rotate(-72deg);
}

css绘制第三个三角形

• 此时，将颜色设置为一样，视觉效果就截然不同了

CSS绘制三角形

吃豆豆

• 原理：利用border-radius和三角形原理，绘制上，下，左，右四个三角形，将右边的颜色设为透明

.eat-man {
width: 0px;
height: 0px;
border:60px solid #e8ff84;
border-right-color:transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;}

css绘制吃豆豆

• 接下来绘制眼睛和豆豆，这就很简单了，眼睛可以利用定位，豆豆我们为其使结构更简单，可以利用伪类

*{margin:0;padding:0;}
.eat-man {
position: relative;
margin:50px auto 0;
width: 0px;
height: 0px;
border:60px solid #e8ff84;
border-right-color:transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
} //eye
.eat-man .eye {
position: absolute;
top:-50px;
left:0px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
} //豆豆
.eat-man .food:before {
position: absolute;
top:-5px;
left:50px;
content: '';
display: block;
width: 15px;
height: 15px;
background: #fff670;
border-radius: 50%;
}
.eat-man .food:after {
position: absolute;
top:-5px;
left:80px;
content: '';
display: block;
width: 15px;
height: 15px;
background: #fff670;
border-radius: 50%;
}
  图形   有趣   第二个   角形   设为 
说明
 1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
 2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
 3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
 5. 如有链接无法下载、失效或广告，请联系管理员处理！
 6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
 7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 纯CSS绘制有趣图形
 分享到：