css如何在下拉框添加倒三角,CSS给选中元素增加倒三角形(示例代码)

需求如下:

2f9718dcbec6460b9e2eef156665034a.jpg

给选中的item添加一个select样式,并且生成一个下三角形

一、三角形的实现原理

宽度width为0;height为0;根据三角形的朝向设置上下左右的border,只能设置其中的三个边框,不用给朝向的那一边设置border。

(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid white,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。

(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。

1、 Triangle Up

4e674cb5b62143df9f7a5430bcf51c36.jpg

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

2、 Triangle Down

c5f5063dc7e24595ade34a92bc09c295.jpg

#triangle-down {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

}

3 、Triangle Left

b3724b5bbc8d4c3e8980989cc80b24aa.jpg

#triangle-left {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid red;

border-bottom: 50px solid transparent;

}

4、 Triangle Right

a74a02c46b3d4bc3b95b1ace5089c3b5.jpg

#triangle-right {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid red;

border-bottom: 50px solid transparent;

}

5、 Triangle Top Left

d900125b347f440f842ec2a6014cee4f.jpg

#triangle-topleft {

width: 0;

height: 0;

border-top: 100px solid red;

border-right: 100px solid transparent;

}

6、 Triangle Top Right

0ccfc61f1727466789e76fa8f6ff1569.jpg

#triangle-topright {

width: 0;

height: 0;

border-top: 100px solid red;

border-left: 100px solid transparent;

}

7、 Triangle Bottom Left

c1904e26843e4a138c0a44f425240b11.jpg

#triangle-bottomleft {

width: 0;

height: 0;

border-bottom: 100px solid red;

border-right: 100px solid transparent;

}

8 、Triangle Bottom Right

c4a71a7a1fd7421886662f0e4f10c058.jpg

#triangle-bottomright {

width: 0;

height: 0;

border-bottom: 100px solid red;

border-left: 100px solid transparent;

}

二、通过 :after选择器进行美化

现在我们知道了三角形的实现原理,接下来就是将这个三角形固定到选中元素的底部,我们可以利用 :after选择器。

对于 :before 和 :after 选择器,大家并不陌生,但是很少有人会主动去用它们。先解释下它们的定义和用法:

:before 选择器在被选元素的内容前面插入内容,:after 选择器在被选元素的内容后面插入内容,都会使用 content 属性来指定要插入的内容。

所以我们就可以这么来实现了:

.select{background:#fff;position:relative;

}.select:after{content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;position:absolute;bottom:-10px;left:40px;

}

select是被选元素的样式,通过:after 将三角形插入到被选元素的后面。一定要注意的是content:"",不能少,否则不生效。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值