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

萌新小白rai
  • 142

UI给了个这样的设计图:

clipboard.png

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

回复
阅读 2.6k
7 个回答
✓ 已被采纳

三十客-在CSS中设置只有两条边的三角形

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

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;
        }

我其实是被题目逗笑进来的,两条边的叫角,不是三角形。然后关于你这需求,你看下伪类。

伪类,一个::before,一个::after,你可以参考一下 百度新闻首页 轮播切换按钮hover时候的样式变化

实心三角你应该会吧,其实就是两个实心三角, 一个灰色的一个白色的,白色的三角把灰色的三角挡住,只剩下一个灰色角的边框就OK了

vizo
  • 419

可以考虑用伪类来实现::before + ::after + 定位处理

相当于菜单了

应该做成一行一行的

由css样式名,来控制右边的符号的显示与隐藏(加上一个class显示,否则隐藏)

如果要做成有滑动动画的,就不适合做到每一行,应该做到外面一层标签上,由鼠标事件来计算相应移动到的位置,动态修改CSS参数值

实现这个元素的显示样式,可以用一个DIV ,设置宽高,只要两个边框,旋转45度角,绝对定位到右边

宣传栏