CSS画三角形

最新推荐文章于 2024-01-23 14:31:29 发布

Continue丶

最新推荐文章于 2024-01-23 14:31:29 发布

阅读量95

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43522998/article/details/114605601

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

画三角形

当我们把一个元素不加宽高，而给它加上不同颜色的边框时，就可以得到如下图形
在这里插入图片描述

.example {
            width: 0;
            height: 0;
           
            line-height: 0; /* 照顾兼容性 */
            font-size: 0; /* 照顾兼容性 */
            
            border-top: 100px solid pink;
            border-bottom: 100px solid rgb(22, 48, 163);
            border-left: 100px solid rgb(16, 192, 54);
            border-right: 100px solid rgb(231, 217, 17);
        }

所以当我们想要某一个三角形时，我们可以将其他边都改为透明，
只将想要的三角形留下

.sanjiao {
            position: absolute;
            top: -20px;
            right: 20px;
            width: 0;
            height: 0;
            /* 照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-bottom-color: pink;
        }

搭配使用可产生如下类似京东页面的效果
在这里插入图片描述

但是有时候又需要一些不同角度的三角形，如类似如下
在这里插入图片描述
这其实也是通过对四边进行调整得来的

1.当我们将左边框颜色透明，会得到如下效果
在这里插入图片描述
2.再将左边框宽度调为0

发现由于左边框为0，则整体图形就会往左压，形成如上。
根据这一特性，我们可以通过改变四条边框的宽度和透明来显示某一效果。

当我们将左、下边框设为0则有
在这里插入图片描述
这时在增加上边框往下的力度，即上边框的宽度，则有

最后将上边框改为透明，不就得到了右边的效果
代码如下：

 .example {
            margin-top: 100px;
            width: 0;
            height: 0;
            border-color: blue red green transparent;
            border-style: solid;
            border-width: 200px 100px 0 0;
        }

根据这一特性可以做类似京东上这种效果：
在这里插入图片描述

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            margin: 50px auto;
            border: 2px solid red;
        }

        .left {
            position: relative;
            float: left;
            width: 120px;
            height: 30px;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            background-color: red;
        }

        .left .price {
            font-size: 18px;
        }

        .sanjiao {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 30px 10px 0 0;
        }

        .discount {
            color: gray;
            font-size: 16px;
            text-decoration: line-through;
        }
    </style>

<body>
    <div class="box">
        <div class="left">
            ￥ <span class="price">2629.00</span>
            <div class="sanjiao">

            </div>
        </div>
        <span class="discount">￥2759</span>
    </div>
</body>

在这里插入图片描述