美文网首页
css实现斜边切线

css实现斜边切线

作者: smallzip | 来源:发表于2020-03-21 19:43 被阅读0次

    效果图

    斜边切线

    要实现去采购和去充值这中间的斜切线效果

    需要使用到css的linear-gradient渐变属性

    源码如下

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      /* 去采购、充值按钮 */
      .flex {
        display: flex;
        align-items: center;
      }
    
      .purchase {
        flex: 1;
        padding: 20px;
        text-align: center;
        color: #fff;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        /* 关键在这里,设置切线的角度和长度 */
        background: linear-gradient(-53deg, transparent 50px, rgb(15, 52, 255) 0);
        /* 设置之后需要把位置向相反的方向偏移,达到粘合 */
        margin-right: -50px;
      }
    
      .recharge {
        flex: 1;
        padding: 20px;
        text-align: center;
        color: #fff;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        /* 关键在这里,设置切线的角度和长度 */
        background: linear-gradient(127deg, transparent 50px, rgb(247, 75, 33) 0);
        /* 设置之后需要把位置向相反的方向偏移,达到粘合 */
        margin-left: -50px;
      }
    </style>
    
    <body>
      <!-- 去采购、充值按钮 -->
      <view class="flex">
        <view class="purchase">
          <text>去采购</text>
        </view>
        <view class="recharge">
          <text>去充值</text>
        </view>
      </view>
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:css实现斜边切线

          本文链接:https://www.haomeiwen.com/subject/wmvuyhtx.html