013-Web前端-CSS动画-绘制简单特殊图形

#6.2 仍然接上篇 （因为总是最近发的总是要审核不好意思一遍遍的改所以直接多发几篇）

---

以CSS绘制三角形

1.首先需要有个元素作为三角的容器

<div></div>

2.制作三角型使用的是border属性，内容区宽高值为0

div{

             width:0;

            height: 0;

            border-top:50px solid red;

            border-left:50px solid blue;——透明化

             border-right:50px solid orange;——透明化

            border-bottom:50px solid green;——注释掉

}

——>

border-top: 20px solid red;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

/*border-bottom: 20px solid transparent;*/

---

以CSS绘制梯形

梯形的高度是底部边的宽度，梯形也是借助border属性完成的。

将 内容width:0; 或 height: 0; 改为 一个值 即可

div {

           border-bottom: 80px solid red;

           border-left: 50px solid transparent;

           border-right: 50px solid transparent;

           height: 0;

           width: 100px;

       }

---

以CSS绘制圆形

用圆角即可做，见010篇。不再赘述

---

人越是明白，越是有追求，就越孤独。

——Carson McCullers