CSS中易迅网三角形的制作_易讯网三角-CSDN博客

本文链接：https://blog.csdn.net/k491022087/article/details/52389610

购物网站上的三角形非常常见，那么我们该如何实现呢，比如我们要实现易迅网上那种倒三角，如下图

首先如果一个盒子我们把它的宽高都设置为0，边框分别设置10个像素不同的颜色，我们看看会出现什么情况？

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 0;
            height: 0;
            border-top: 10px solid red;
            border-right: 10px solid yellow;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

奇迹出现了，上下左右全是三角形

通过上面的结果我们可以很快的实现易迅网上那种倒三角，只需要将其它的边框设置为透明这样就可以实现一个倒三角，最后使用子绝父相的方法让三角形位于合适的位置，这样我们就实现了易迅网中的那种三角形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: relative; /*相对定位*/
        }
        span {
            width: 0;
            height: 0;
            display: inline-block;
            /*设置边框宽度为5px，上边框为红色，其它为透明，并且为实线*/
            border-width: 5px;
            border-color: red transparent transparent transparent;  
            border-style: solid;
            position: absolute; /*绝对定位*/
            top: 6px;
        }
    </style>
</head>
<body>
<div>
    送至深圳<span></span>
</div>
</body>
</html>