如何使用CSS来制作图形,比如说圆形,半圆形,三角形等。今天我特意在网上查阅了一下,介绍这样的教程还是蛮多的,因此我也决定整理一份相关教程出来与大家一起分享。
如何工作?
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变其大小来实现不同的效果。我们一起来看一段代码:
1 2 3 4 5 6 7 |
.css-arrow-multicolor { border-color: red green blue orange; border-style:solid; border-width:20px; width:0; height:0; } |