前面说了易迅三角的实现方法,现在来说说另外一个三角-淘宝三角,如下图所示
淘宝三角形该怎么实现呢?肯定是需要两个三角形来层叠在一起的,只要进行如下图的层叠这个淘宝三角就出来了。
代码如下:同样需要使用子绝父相的方法来进行定位,好让两个三角形层叠在一起
<!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>