css布局技巧-css三角巧妙运用

爱音斯坦牛

已于 2023-03-19 16:30:26 修改

阅读量4.7k

点赞数 22

分类专栏：软磨 css 文章标签： css 前端 css3 html

于 2022-02-15 01:19:35 首次发布

本文链接：https://blog.csdn.net/qq_57421630/article/details/122909347

版权

软磨 css 专栏收录该内容

18 篇文章 61 订阅

订阅专栏

📋 个人简介

💖 作者简介：大家好，我是阿牛😜
📝 个人主页：馆主阿牛🔥
🎉 支持我：点赞👍+收藏⭐️+留言📝
📣 系列专栏：css🍁
💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

请添加图片描述

上期传送门：
👉css中的选择器
👉css盒子模型及其实战案例（上）
👉css盒子模型及其实战案例（下）
👉css网页布局之浮动及其实战案例（超详细）
👉css中的定位详解
👉css中元素的显示与隐藏
👉我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧
👉css三角的做法及其案例

前言

上期我们写了css三角，这期我们写css三角巧妙运用，用案例学习。

css三角强化

上期的css三角是等腰的，有是我们需要像下面这中的直角，该怎么做呢？
在这里插入图片描述
接下来我一步步教你做：

在上期做法基础上做改动就行
在这里插入图片描述
只需要把上期这个盒子左边框和下边框宽度设为0,上边框加大宽度就行。

.demo1{
            width:0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top:20px solid red ;
            border-right:10px solid green ;
            border-bottom:0px solid blue ;
            border-left:0px solid purple ;
        }

在这里插入图片描述
正好得到两个方向的直角三角形，将其中一个变透明就行。

<!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>
        .demo1{
            width:0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top:20px solid transparent ;
            border-right:10px solid green ;
            border-bottom:0px solid blue ;
            border-left:0px solid purple ;
        }
    </style>
</head>
<body>
    <div class="demo1">

    </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>
        .demo{
            width: 160px;
            height: 24px;
            line-height: 24px;  /* 让文本垂直居中 */
            border: 1px solid red;
            margin: 50px  auto;
            

        }
        .demo1{
            position: relative;
            float: left;   /* span是行内元素，浮动之后可设置宽高*/
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }
        .demo1 i{
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
          }  
          .demo2{
              font-size: 12px;
              color: gray;
              text-decoration: line-through;
          }
    </style>
</head>
<body>
    <div class="demo">
        <span class="demo1"> 
            ￥1500
            <i></i>
        </span>
        <span class="demo2">￥1999</span>

    </div>
</body>
</html>