如今css3盛行的时代,用canvas,svg以及linear-gradient,radio-gradient都能画出各种各样的图形。
但是早在css2时代,画三角形就不是什么新鲜事。这里简单总结一下,也方便自己查阅。
<div class=”triangle-up”></div>
写出通用结构,
.triangle-up {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}
如果这样写样式的话,由于没有设置border-right 会导致三角形的尖角指向右方。这个发挥一下空间想象力,纸上画一下就知道了。
如果要三角尖朝上只需不设置border-top即可。
#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
同理: 三角减朝左:
#triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}
三角减朝下:
#triangle-down {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}
当然如果我把border-top设置100px 红色 ,,border-left设置为100px 透明的话会得到一个折角的效果:
#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}
这样又是可以设置四个方向的。原理都一样。
可就是这样,还是有人,期望过多的温暖。