搜索框圆角实现

就是改变每个角的弧度，弧度=长度/2，实现搜索框圆角

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 36px;
            /* background-color: red; */
            border: 2px solid red;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

小三角实现

每个容器都有四条边，这四条边放大了看，是由四个等腰三角形组成的

因此，只要隐藏其他三个三角形，留下一个有颜色的，就能实现小三角

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 0px;
            height: 0px;
            /* background-color: red; */
            border: 50px solid transparent;
            border-top-color: transparent;
            border-left-color: black;
            border-bottom-color: transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>