0
点赞
收藏
分享

微信扫一扫

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

其生 2022-02-15 阅读 63

📋 个人简介

  • 💖 作者简介:大家好,我是阿牛😜
  • 📝 个人主页:馆主阿牛🔥
  • 🎉 支持我:点赞👍+收藏⭐️+留言📝
  • 📣 系列专栏: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>

在这里插入图片描述

结语

下期带来其他布局技巧,喜欢就持续关注哦!!!

举报

相关推荐

CSS---三角的做法

css写三角形

css制作三角形

css 面试题画三角

CSS画三角形

CSS学习笔记19——画三角

CSS绘制三角形

css三角和初始化

0 条评论