使用CSS3绘制一个实心三角形

效果如下:
三角形

实现这一过程其实很简单:
1、先创建一个盒子

<div id="trangle">div>

2、为这个盒子添加样式

#triangle {
    height: 0;
    width: 0;
    border-right: 50px solid transparent;
    border-bottom: 50px solid yellow;
    border-left: 50px solid transparent;
}

搞定!顿时觉得好简单,一个边框就能解决的事


实现原理如下
先创建一个有宽高的盒子,同时设置四条边框的大小,假设为50px,结果如下图:
使用CSS3绘制一个实心三角形_第1张图片
可以发现边框与边框的连接是一条斜线,那么如果不设置宽高的话,结果会怎样:
使用CSS3绘制一个实心三角形_第2张图片

变成了一个被四种颜色平均分割的正方形了,我们所要的三角形不正是其中的一部分吗,接下来我们只要选择我们所需要的那一部分就好了,所以可以这么做(选择上面那块红色的):

#triangle {
    height: 0;
    width: 0;
    border-top: 50px solid red;
    /*此处将左右的边框设置为透明色*/
    border-right: 50px solid transparent ; 
    border-left: 50px solid transparent;
}

把剩余两边设置为透明色即可以,这里不为下边框设置宽度和颜色是因为下边框取消的话,原来的图像会变成这样:
这里写图片描述
对整个图像并没有太大的影响,而且释放了下边框所占的位置,当在图下面添加东西时不会有凭空的一块空白。
所以上面那段style运行的结果如下:
这里写图片描述
至此三角形的绘制也就完成了,如果需要绘制一个直角三角形,那么可以只设置(左、右)中的一个和(上,下)中的一个即可。结果展示:
这里写图片描述这里写图片描述这里写图片描述这里写图片描述
只要把不需要的那部分设置为透明色就可以了。

你可能感兴趣的:(使用CSS3绘制一个实心三角形)