css中淘宝网的更多三角制作

安静的对折

于 2016-08-31 22:22:03 发布

阅读量908

点赞数

分类专栏： CSS 文章标签： css html 前端

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

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前面说了易迅三角的实现方法，现在来说说另外一个三角-淘宝三角，如下图所示

淘宝三角形该怎么实现呢？肯定是需要两个三角形来层叠在一起的，只要进行如下图的层叠这个淘宝三角就出来了。

代码如下：同样需要使用子绝父相的方法来进行定位，好让两个三角形层叠在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one {
            position: relative;
        }
        span {
            position: absolute;
            display: inline-block;
            width: 0;
            height: 0;
            border-width: 6px;
            border-style: dashed dashed dashed solid;
		/*dashed是设置虚线*/
        }
        .s1 {
            top: 3px;
            left: 35px;
            border-color: transparent transparent transparent red;
        }
        .s2 {
            top: 3px;
            left: 35;
            border-color: transparent transparent transparent white;
        }
    </style>
</head>
<body>
<div class="one">
    更多<span class="s1"></span><span class="s2"></span>
</div>
</body>
</html>