HTML+CSS：绘制三角形

之前有写过《自制下拉列表》。虽然看上去，是那么一回事。但是，距离正真的下拉列表还差很大一截。随着不断的学习，我们会一点点接近，完善。

在这里我们一起学习绘制下拉列表，右边的小三角形。

咦？？？那个小三角形不是图片或者是小图标吗？怎么还需要绘制？嗯… …这就是所谓的不当家不知柴米贵。其实我现在也不晓得。那么一点图片能占用多少内存，随着硬件的发展，对页面加载速度能影响多少？不过，自己绘制的，总是香的。
首先观察下面这张图片。
在这里插入图片描述

一个加有边框的正方形。除了边框宽一些，颜色炫一些。哪有我们想要的三角形？？？

假如内部的正方形的宽高都为零的话。
在这里插入图片描述
纳尼~~~
四个等腰三角形！！！
哦，，，我知道了，接下来，只要把其余三个三角形干掉，就行了。
思路一:设置和背景一样的颜色。
思路二：直接设置通明色(transparent)
思路三：修改通明属性(opacity)

代码演示
HTML代码：

<body>
    <div class="box">div>
body>
1
2
3

CSS代码：

 .box{
            width:0px;
            height:0px;
            border:40px solid;
            border-color:red transparent transparent transparent;
            margin:100px auto;
        }
1
2
3
4
5
6
7

这就是我们要的三角形。
案例练习：
先上效果：
chrome浏览器-显示效果：
在这里插入图片描述

HTML代码：

<body>
   <div class="box">
    <form action="">
        <label class="label" for="">
            <input type="text" value="海贼王">
           <dic class="box2">
            <div class="box1">div>
            <ul>
                <li>路飞li>
                <li>香克斯li>
                <li>索隆li>
            ul>
           

           dic>
        label>
    form>
   div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

CSS代码：

 /* 清除所有标签的内外间距 */
        *{
            margin:0;
            padding:0;
        }
        /* 设置最外层盒子 */
        .box{
            width:220px;
            position:relative;
            margin:100px auto;
        }
         /* 绘制三角形 */
       .box1{
        width:0;
        height:0;
        border:10px solid;
        border-color:gray transparent transparent transparent;
        float:right;
        position:absolute;
        top:7px;
        left:140px;
       }
        /* 扩大三角形所在的面积，没有实现*/
       /* .box2{
        width:40px;
        height:40px;
        background-color:red;
        z-index:1;
       } */
        /* 设置无序列表 */
       ul{
        list-style:none;
        margin-left:7px;
        display:none;
       }
        /* 设置无序列表项 */
       li{
        width:140px;
        background-color:rgb(221, 215, 215);
        text-align:center;
        margin-top:5px;
        
       }
        /* 当鼠标悬停在三角形，显示列表 */
       .box2:hover ul{
         display:block;
       }
        /* 鼠标悬停在列表项，改变样式 */
       li:hover{
        background-color:black;
        color:red;
       }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

相关阅读:
内存分析总结
10. python字典
VSCODE CMAKE C++ 工程调试， C++不以科学计数法输出并控制小数位数
Java通过Lambda表达式根据指定字段去除重复数据（集合去重）
使用第三方账号认证（一）：钉钉扫码登录
软考系统架构设计师系列知识点之基于架构的软件开发方法ABSD（4）
HDFS High Availability（HA）高可用配置
阅读android中frameworks层代码的几种方式
2023-09-13 mysql-代号m-insert select语句注册-问题分析
深度解析C#中LinkedList<T>的存储结构

原文地址：https://blog.csdn.net/qq_40924992/article/details/126210868