CSS 三角形

蹦瞎卡拉卡1122

已于 2024-08-26 10:00:14 修改

阅读量21

点赞数 1

分类专栏： CSS 文章标签： css

于 2020-06-12 11:11:29 首次发布

本文链接：https://blog.csdn.net/m0_48573736/article/details/106698430

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css四色三角实现方法：

1.将 div 的宽、高设置为 0 ，随后设置四个边框属性，即可得到四色三角

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-right: 100px solid yellow;
            border-bottom: 100px solid blue;
            border-left: 100px solid green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图：

2.保留想显示一边的颜色，其余设置为透明，可显示三角形：

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-left-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图：

3.不同形状的三角形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-right: 50px solid red;
            border-bottom: 0 solid blue;
            border-left: 0 solid green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图：

实际运用

实现京东价格标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid red;
            overflow: hidden;
            position: absolute;
        }

        .box span{
            display: block;
            float: left;
            width: 80px;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }

        .box .sl{
            width: 105px;
            background-color: red;
            color: white;
            font-weight: bolder;
            position: relative;
        }

        .box .sl::before{
            content: '';
            width: 0;
            height: 0;
            border-top: 25px solid red;
            border-right: 15px solid white;
            display: block;
            position: absolute;
            right: 0
        }

        .box .sr{
            color: #999;
            font-size: 14px;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="sl">¥255.00</span>
        <span class="sr">¥448.00</span>
    </div>
</body>
</html>

效果图：

总结：设置不同border的width和color，可实现不同组合；

蹦瞎卡拉卡1122

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 三角形

css四色三角实现方法：1.将 div 的宽、高设置为 0 ，随后设置四个边框属性，即可得到四色三角html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 0;
复制链接

扫一扫

专栏目录