京东页面中小三角的三种制作方案

切记:在盒子边框属性中,border属性有常用的border-style、border-width、border-color、等等。其中也可以直接写综合形式,也就是直接用border:10px solid transparent.或者border:10px solid pink.也就是说。重点来了:transparent是color的一种。写red就不写transparent了。

创建三角有三种方法:

第一种:

<!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>
        .ss {
            height: 0;
            width: 0;
            margin: 100px auto;
            border: 40px solid transparent;
            border-top-color: pink;
        }
    </style>
</head>

<body>
    <div class="ss"></div>




</body>

</html>

效果如下: 

第二种:

<!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>
        .s {
            height: 0;
            width: 0;
            margin: 100px auto;
            border-bottom: 40px solid pink;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
        }
    </style>
</head>

<body>
    <div class="s"></div>
</body>

</html>

如果上下都有三角,像个漏斗一样,那就设置上下不透明。

<!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>
        .s {
            height: 0;
            width: 0;
            margin: 100px auto;
            border-bottom: 40px solid pink;
            border-top: 40px solid pink;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
        }
    </style>
</head>

<body>
    <div class="s"></div>
</body>

</html>

也可以设置比较尖的三角。左右设置边框小一点就可以了,

<!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>
        .s {
            height: 0;
            width: 0;
            margin: 100px auto;
            border-bottom: 60px solid pink;
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
           
        }
    </style>
</head>

<body>
    <div class="s"></div>
</body>

</html>

也可以根据兴趣自己制作出各种三角图形。

第三种:设置左右三角,分开写边框属性值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=., initial-scale=1.0">
    <title>Document</title>
    <style>
        .sss {
            height: 0;
            width: 0;
            margin: 100px auto;
            border-style: solid;
            border-width: 40px;
            border-color: transparent pink transparent transparent;
        }
    </style>
</head>

<body>
    <div class="sss"></div>
</body>

</html>

 

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页