效果如下:
实现这一过程其实很简单:
1、先创建一个盒子
<div id="trangle"></div>
2、为这个盒子添加样式
#trangle {
height: 0;
width: 0;
border-right: 50px solid transparent;
border-bottom: 50px solid yellow;
border-left: 50px solid transparent;
}
搞定!顿时觉得好简单,一个边框就能解决的事
实现原理如下
先创建一个有宽高的盒子,同时设置四条边框的大小,假设为50px,结果如下图:
可以发现边框与边框的连接是一条斜线,那么如果不设置宽高的话,结果会怎样:
变成了一个被四种颜色平均分割的正方形了,我们所要的三角形不正是其中的一部分吗,接下来我们只要选择我们所需要的那一部分就好了,所以可以这么做(选择上面那块红色的):
#trangle {
height: 0;
width: 0;
border-top: 50px solid red;
/*此处将左右的边框设置为透明色*/
border-right: 50px solid transparent ;
border-left: 50px solid transparent;
}
把剩余两边设置为透明色即可以,这里不为下边框设置宽度和颜色是因为下边框取消的话,原来的图像会变成这样:
对整个图像并没有太大的影响,而且释放了下边框所占的位置,当在图下面添加东西时不会有凭空的一块空白。
所以上面那段style运行的结果如下:
至此三角形的绘制也就完成了,如果需要绘制一个直角三角形,那么可以只设置(左、右)中的一个和(上,下)中的一个即可。结果展示:
只要把不需要的那部分设置为透明色就可以了。