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

最新推荐文章于 2025-07-30 17:57:18 发布

㼛思雨

最新推荐文章于 2025-07-30 17:57:18 发布

阅读量285

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML5和CSS3进阶文章标签： css3 css html5 html es6

本文链接：https://blog.csdn.net/weixin_45147894/article/details/108688980

HTML5和CSS3进阶专栏收录该内容

37 篇文章

订阅专栏

本文介绍使用CSS边框属性创建不同形状的三角形图形的方法。包括调整三角形的方向、大小及颜色，通过简单示例展示了如何仅用少量代码实现美观的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

切记：在盒子边框属性中,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>