025CSS之三角

原创已于 2022-03-29 15:36:50 修改 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3

于 2022-03-22 22:33:58 首次发布

HTML5 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了如何使用CSS来创建各种三角形，从基本的原理到具体的代码实现，包括京东样式三角和三角强化技巧。通过调整边框宽度和颜色，可以实现不同方向和颜色的三角形，并在实际案例中展示了如何应用于价格优惠提示箭头，帮助读者理解并掌握CSS绘制三角形的方法。

一、简介

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
一张图，你就知道 CSS 三角是怎么来的了, 做法如下：

        .box{
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;

            margin: 200px auto;
            border: 100px solid transparent;
            border-left-color: blue;
            border-right-color: red;
            border-top-color: black;
            border-bottom-color: green;
        }

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

二、京东三角案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东三角</title>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            /* 父元素相对定位 */
            position: relative;
            width: 200px;
            height: 200px;

            margin: 100px auto;
            background-color: green;
        }
        .child{
            /* 子元素绝对定位 */
            position:absolute;
            top: -60px;
            left: 70px;
            width: 0px;
            height: 0px;
           
            border: 30px solid transparent;
            border-bottom-color: red;
        }
    </style>

</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

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

三、三角强化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角强化</title>

    <style>
        .box{
            /* 宽度和高度必须设置为0 */
            width: 0px;
            height: 0px;
            
            margin:  100px auto;
            /* 通过边框的宽度撑起盒子 */
            border-top: 100px solid red;
            border-right: 50px solid blue;
            border-bottom: 50px solid gray;
            border-left: 50px solid green;
        }
    </style>

</head>
<body>
    <div class="box"></div>
</body>
</html>

效果和分析：
在这里插入图片描述
所以，如果把 border-left 和 border-bottom 的宽度设置为0，那么显示出来的效果如下：

        .box{
            /* 宽度和高度必须设置为0 */
            width: 0px;
            height: 0px;
            
            margin:  100px auto;
            /* 通过边框的宽度撑起盒子 */
            border-top: 200px solid red;
            border-right: 100px solid blue;
            /* 把底部的边框和左边的边框 的宽度设置为 0，颜色设置为透明 */
            border-bottom: 0px solid transparent;
            border-left: 0px solid transparent;
        }

效果：
在这里插入图片描述
此时再把 border-top 的颜色设置成透明，但是宽度不能变，如果设置成0，那么盒子就无法撑起来了，如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角强化</title>

    <style>
        .box{
            /* 宽度和高度必须设置为0 */
            width: 0px;
            height: 0px;
            
            margin:  100px auto;
            /* 通过边框的宽度撑起盒子 */
            /* 把顶部边框的颜色设置成透明，但是宽度不能改，要不然无法撑起盒子 */
            border-top: 200px solid transparent;
            border-right: 100px solid blue;
            /* 把底部的边框和左边的边框 的宽度设置为 0，颜色设置为透明 */
            border-bottom: 0px solid transparent;
            border-left: 0px solid transparent;
        }
    </style>

</head>
<body>
    <div class="box"></div>
</body>
</html>

效果：
在这里插入图片描述
代码还可以简写为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角强化</title>

    <style>
        .box{
            /* 宽度和高度必须设置为0 */
            width: 0px;
            height: 0px;
            
            margin:  100px auto;

            border-style: solid;
            border-color: transparent blue transparent transparent;
            border-width: 200px 100px 0 0;
        }
    </style>

</head>
<body>
    <div class="box"></div>
</body>
</html>

四、三角应用

要实现的效果：
在这里插入图片描述
原理：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角强化</title>

    <style>
        .box{
            
            width: 400px;
            height: 100px;
            
            line-height: 100px;
            text-align: center;
            margin:  100px auto;
            border: 1px solid red;
        }
        .miaosha{
            float: left;
            position: relative;
            top: 0;
            left: 0;
            width: 260px;
            height: 100%;

            background-color: red;
        }
        .miaosha i{
            position: absolute;
            top: 0;
            right: 0;

            border-style: solid;
            border-color: transparent #fff transparent transparent;
            border-width: 100px 30px 0px 0px;
        }
        .origin{
            text-decoration: line-through;
            color: gray;
            font-size: 14px;
        }
    </style>

</head>
<body>
    <div class="box">
        <span class="miaosha">
            ￥2099.00
             <i></i>   
        </span>
        <span class="origin">￥2649.00</span>
    </div>
</body>
</html>

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