css怎样设置只有两条边的三角形

萌新小白rai

14232841

发布于
2018-06-27

UI给了个这样的设计图：

　　这个箭头该怎样实现？思路是怎样的？网上都是带背景没边框的。
如果是使用图片，该相对于谁定位啊？如果添加鼠标滑过或点击跟随移动到对应标签的效果又该怎样实现呢？大概思路就好。拜托了~

css

阅读 4.5k

7 个回答

✓ 已被采纳

用三角形和两个伪类即可实现，效果见上述实现！

li {
            position: relative;
            padding: 0.5em 0.75em;
        }
        li:hover {
            font-weight: bold;
            cursor: pointer;
        }
        li:hover::before {
            content: '';
            position: absolute;
            top : 19px;
            right : 0;
            width: 0;
            height: 0;
            border-right: 10px solid #ccc;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }
        li:hover::after {
            content: '';
            position: absolute;
            top : 19px;
            right : -2px;
            width: 0;
            height: 0;
            border-right: 10px solid #fff;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }