css 下拉框下三角形

最新推荐文章于 2023-04-08 11:59:28 发布

小灰机大

最新推荐文章于 2023-04-08 11:59:28 发布

阅读量2.8k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Zhou_Yulong/article/details/101870667

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css 用border属性实现下拉框三角形

效果如图

trangle

思路

设置一个空元素，设置左右边框以及上边框，其宽度即为三角形的高，

效果如图：
在这里插入图片描述

1、当设置上边框以及左右边框，再将左右边框颜色透明，则为下三角
2、当设置下边框以及左右边框，再将左右边框颜色透明，则为上三角
3、同理也可设置左右三角

示例代码

<!DOCTYPE html>
<html>
<body>
<div><i></i></div>
</body>
<style>
    body {
    }
    div {
        margin: auto;
        border: 1px solid #e1e4e8;
        width: 200px;
        height: 30px;
        position: relative;
    }
    /*下三角样式: 空元素，上下设置左右边框以及上边框，令左右边框透明即可得到*/
    i {
        border-left:8px solid #000000;
        border-left-color: transparent;
        border-right: 8px solid #000000;
        border-right-color: transparent;
        border-top: 8px solid #000000;
        position: absolute;
        right: 10px;
        top: 12px
    }
</style>
</html>

小灰机大

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 下拉框下三角形

css 用border属性实现下拉框三角形效果如图思路设置一个空元素，设置左右边框以及上边框，其宽度即为三角形的高，效果如图：1、当设置上边框以及左右边框，再将左右边框颜色透明，则为下三角2、当设置下边框以及左右边框，再将左右边框颜色透明，则为上三角3、同理也可设置左右三角示例代码<!DOCTYPE html><html><body&...
复制链接

扫一扫