20.CSS三角巧妙运用

最新推荐文章于 2021-07-19 20:03:34 发布

美美| ू•ૅω•́)ᵎᵎᵎ

最新推荐文章于 2021-07-19 20:03:34 发布

阅读量95

点赞数

分类专栏： html，css基础

本文链接：https://blog.csdn.net/lazylYYY/article/details/118902357

版权

html，css基础专栏收录该内容

21 篇文章 4 订阅

订阅专栏

一：一个三角怎样画出:

二：秒杀图片怎样做：

一：一个三角怎样画出:

设一个宽高为0的div盒子，然后给他加50px的边框solid red ；此时页面展示的就是一个50*50的红色正方形，我们把下，左的border设置为0，把上边框颜色改成透明色transparent，此时就出现的是右边框产生的三角形

<!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>Document</title>
    <style>
        div {
            width: 0;
            height: 0;

            /* 1.只保留右边的边框有颜色  上 右 下 左 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上边框宽度要大，右边宽度框稍微小一点，其余边框为0 */
            border-width: 100px 50px 0 0;

        }
    </style>
</head>

<body>

    <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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 25px;
            border: tomato 1px solid;
            margin: 100px auto;
            line-height: 25px;
            text-align: center;
        }

        .left {
            position: relative;
            float: left;
            background-color: tomato;
            width: 100px;
            margin-right: 10px;
        }

        .a {
            position: absolute;
            right: 0;
            height: 0;
            width: 0;
            border-width: 25px 10px 0 0;
            border-style: solid;
            border-color: transparent pink transparent transparent;
        }

        .right {
            text-decoration: line-through;
            font-size: 14px;
            font-weight: 700;
            color: gray;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="left">￥1650
            <span class="a"></span>
        </span>

        <span class="right"> ￥5650</span>

    </div>
</body>

</html>

美美| ू•ૅω•́)ᵎᵎᵎ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
20.CSS三角巧妙运用

目录一：一个三角怎样画出:二：秒杀图片怎样做：一：一个三角怎样画出:设一个宽高为0的div盒子，然后给他加50px的边框solid red ；此时页面展示的就是一个50*50的红色正方形，我们把下，左的border设置为0，把上边框颜色改成透明色transparent，此时就出现的是右边框产生的三角形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt..
复制链接

扫一扫