如何在css中绘制特殊图形

如何在css中绘制特殊图形？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

一、三角形

border边框设置

代码：

width:300px;
height:300px;
background:red;
border:40pxsolidblack;
border-left-color:blue;
border-bottom-color:yellow;
border-right-color:pink;
border-top-color:#008800;

花特殊图形的时候需要将宽高设置成0

效果：

代码：

width:0;
height:0;
background:transparent;
border:40pxsolidblack;
border-left-color:blue;
border-bottom-color:yellow;
border-right-color:pink;
border-top-color:#008800;

1、等腰三角形：将其他的边的border设置成透明

代码：

width:0;
height:0;
background:transparent;
border:40pxsolidblack;
border-left-color:transparent;
border-bottom-color:yellow;
border-right-color:transparent;
border-top-color:transparent;

2、直角三角形

代码：先写出个完整的div,再使用border-***-width：0；来截取三角形

border-top-width/border-bottom-width:0=》就是在中间横着劈开一道，保留上边或者下边

border-left-width/border-right-width:0=》就是在中间竖着劈开一道，保留左边或者右边

.rightAngle{
width:0;
height:0;
background:transparent;
border:40pxsolidblack;
border-left-color:blue;
border-bottom-color:yellow;
border-right-color:pink;
border-top-color:#008800;
border-top-width:0;
border-left-width:0;
border-right-color:transparent;
}

3、梯形

彩带图形：

代码：

width:300px;
height:0;
background:transparent;
border:40pxsolid#008800;
border-left-color:transparent;
border-bottom-color:yellow;
border-right-color:transparent;
border-top-color:#008800;

梯形：

代码：将上面彩带图形的宽度减少，然后将上面的梯形设置为透明

width:100px;
height:0;
background:transparent;
border:40pxsolid#008800;
border-left-color:transparent;
border-bottom-color:#008800;
border-right-color:transparent;
border-top-color:transparent;

总结：通过设置长度和高度，以及设置border的透明度来拼凑成想要的图形 4、圆形

4、图形：

代码： 使用border-radius:50%;

.circle{
width:100px;
height:100px;
border:0;
border-radius:50%;
background-color:orange;
}

5、椭圆

图形：

代码：

.ellipse{
width:200px;
height:120px;
background-color:orange;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}

总结：

一个display：block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形，圆形和椭圆形。

在使用border-radius时，有几点可能需要注意一下：

• border-radius，可以分别对4个角进行设定。 例如上图：border-top-left-radius: apx bpx;

• border-xxx-xxx-radius的两个值分别代表着椭圆长轴和短轴长度的一半，通常简写的时候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明长轴和短轴的长度均为20px，也就是半径为10px的圆形（圆角部分）。

• 当使用百分比数值时，a 相对于width， b相对于height 6、特殊图形

（1）斜边三角形

图形：

代码：先画个等边三角形，然后再转换角度

.beveledTriangle{
margin:50px;
width:0;
height:0;
border:20pxsolid#2b81af;
border-top-width:40px;
border-top-color:transparent;
border-bottom-width:40px;
border-bottom-color:transparent;
border-left-width:0;
border-right-color:#008800;
border-right-width:25px;
transform-origin:centercenter;
transform:rotateY(-180deg)rotate(-44deg);
}

（2）绘制一条“小尾巴”

图形：

代码：

.tail{
margin:50px;
width:100px;
height:70px;
border-top-right-radius:70px70px;
border-right:6pxsolid#000000;
}

总结：当对一个角应用圆角样式， 如果这个角相邻的两个boeder一个有定义而一个无定义 ，那么绘制的结果就是有粗到细的“小尾巴了”

7、绘制QQ图案（取自AlloyTeam案例）

图形：

代码：