首页前端开发正文

用CSS来实现三角形的原理

朱绪2017-07-032679CSS

在前端开发过程中,三角形在很多地方都能用到。

但是为了保证网站的性能,很少会用图片,而是用CSS来实现。

至于为什么不用图片,我简单说两句:

①图片体积比较大,数据传输量大。

②一张图片会引发一次HTTP请求。

这是影响页面加载速度的,所以我们更倾向于用CSS来实现!

至于“用CSS来实现三角形”的原理,我用一句话概括一下就是:将一个元素的width和height定义为0,然后为它设置较粗的边框,并且将其中任意三条或者两条边框的颜色定义为transparent。

我就举一个具体的例子吧:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{
            width: 0;
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: red green blue orange;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

预览效果如下:

用CSS来实现三角形的原理

我们晓得,border-color属性包含4个值,分别对应上、右、下、左4条边的颜色,呈顺时针排列。

倘若将右、下、左3条边的颜色改成transparent(透明),我们将会看到一个指向下方的红色的三角形,感兴趣的可以自己试试。