CSS 利用边框制作三角形(下)

最新推荐文章于 2024-07-25 08:14:42 发布

随·枫

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量248

点赞数 4

文章标签： css html 前端

本文链接：https://blog.csdn.net/yuzhochaojiwudib/article/details/139201249

版权

提示：以下是本篇文章正文内容，下面案例可供参考

一、准备工作

通过上篇文章我们介绍了三角形制作的原理，当我们将某条边框的宽度设置为0会发生什么呢？答案是变为原来正方形的一半了效果，可以看做是某个边往中间在压缩。盒子的高度全部由上边框来提供，最终效果就是盒子变为原来的一半。

.box2 {
            width: 0;
            height: 0;
            border-color: red green blue gray;
            border-style: solid;
            /* 将底边框的宽度设置为0 */
            border-width: 50px 50px 0 50px;
        }

紧接着我们再将左边框的宽度也设置为0，这样就会得到连个直角三角形了。再适当拉大上边框的宽度，就会得到我们想要的三角形。当然将上边框和右边框的宽度设置为0也是同样的效果。

.box3 {
            width: 0;
            height: 0;
            border-color: red green blue gray;
            border-style: solid;
            /* 将底边框和左侧的宽度设置为0 */
            border-width: 80px 50px 0 0;
        }

这样只要适当隐藏颜色，就会得到我们需要的形状了。同理另外两个方向的三角形也可以如此来得到。因为此时盒子的高度全部由下边框的宽度来提供，所以我们适当拉大下边框的高度就可以得到想要的形状。同样将下边框和右边框宽度设置为0，也是同样的效果。


.box4 {
            width: 0;
            height: 0;
            border-color: red green blue gray;
            border-style: solid;
            /* 将上边框和左侧的宽度设置为0，此时整个盒子的高度由下边框提供 */
            border-width: 0 50px 80px 0;
        }

二、具体应用

理论部分已经准备完毕，接下来就是制作秒杀的按钮样式了。先准备秒杀按钮的盒子及其内容。

<div class="miaosha">
        <div class="now">
            ￥1650
            <!-- 使用i标签制作三角形 -->
            <i></i>
        </div>
        <span class="price">￥5650</span>
    </div>

下面书写 CSS 部分样式，我们给 .miaosha 盒子一个宽度和高度，以及line-height 属性，这样里面的文字就会垂直居中。紧接着利用浮动不会压住文字的原理，将 now 盒子浮动就可以实现一侧放置秒杀价，一侧放置原价的效果。再利用 i 标签制作三角形，利用子绝父相，实现位置摆放即可。

.miaosha {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 10px auto;
        }
 
        .now {
            position: relative;
            /* 存放秒杀价格的盒子浮动，就可实现秒杀与原来价格左右排列 */
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            margin-right: 10px;
        }
 
        .now i {
            /* 子绝父相对 */
            position: absolute;
            top: 0;
            right: 0;
 
            width: 0;
            height: 0;
            /* 开始制作三角形，最终版简化代码 */
            border-color: transparent white transparent transparent;
            border-style: solid;
            /* 整个 i 盒子高度全部由上边框提供 */
            border-width: 24px 10px 0 0;
        }
 
        /* 设置字体样式 */
        .now span {
            color: #fff;
            font-weight: 700;
        }
 
        .price {
            color: gray;
            font-size: 12px;
            text-decoration: line-through;
        }

总结

老规矩，整个 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>212-CSS三角形汇总</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border-color: red green blue gray;
            border-style: solid;
            border-width: 50px 50px 50px 50px;
        }
 
        .box2 {
            width: 0;
            height: 0;
            border-color: red green blue gray;
            border-style: solid;
            /* 将底边框的宽度设置为0 */
            border-width: 50px 50px 0 50px;
        }
 
        .box3 {
            width: 0;
            height: 0;
            border-color: red green blue gray;
            border-style: solid;
            /* 将底边框和左侧的宽度设置为0 */
            border-width: 80px 50px 0 0;
        }
 
        .box4 {
            width: 0;
            height: 0;
            border-color: red green blue gray;
            border-style: solid;
            /* 将上边框和左侧的宽度设置为0，此时整个盒子的高度由下边框提供 */
            border-width: 0 50px 80px 0;
        }
 
        /* ---------------------------------------------------------------- */
        .miaosha {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 10px auto;
        }
 
        .now {
            position: relative;
            /* 存放秒杀价格的盒子浮动，就可实现秒杀与原来价格左右排列 */
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            margin-right: 10px;
        }
 
        .now i {
            /* 子绝父相对 */
            position: absolute;
            top: 0;
            right: 0;
 
            width: 0;
            height: 0;
            /* 开始制作三角形，最终版简化代码 */
            border-color: transparent white transparent transparent;
            border-style: solid;
            /* 整个 i 盒子高度全部由上边框提供 */
            border-width: 24px 10px 0 0;
        }
 
        /* 设置字体样式 */
        .now span {
            color: #fff;
            font-weight: 700;
        }
 
        .price {
            color: gray;
            font-size: 12px;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box">
        <h4>原来的三角形</h4>
        <div class="box1"></div>
        <h4>将底边框的宽度设置为0</h4>
        <div class="box2"></div>
        <h4>再将左边框的宽度也设置为0</h4>
        <div class="box3"></div>
        <h4>再将上边框和左边框的宽度设置为0</h4>
        <div class="box4"></div>
    </div>
    <hr><hr> <hr>
    
    <div class="miaosha">
        <div class="now">
            <span>￥1650</span>
            <!-- 使用i标签制作三角形 -->
            <i></i>
        </div>
        <span class="price">￥5650</span>
    </div>
</body>
</html>