目录
  • 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 ;
        }

    css布局技巧css三角示例的巧妙运用

    正好得到两个方向的直角三角形，将其中一个变透明就行。

    <!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>

    css布局技巧css三角示例的巧妙运用

    案例

    <!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布局三角运用的资料请关注其它相关文章！

    声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。