likes
comments
collection
share

linear-gradient CSS实现斜边圆角长方形

作者站长头像
站长
· 阅读数 29

linear-gradient CSS实现斜边圆角长方形 UI 同学设计了上图效果，两个颜色图形代表 a，b 两个数据的百分占比，难点在这个斜边，但是掌握了 CSS 的 linear-gradient，也就没什么难事了。

linear-gradient()

linear-gradient()  CSS 函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像，其结果是 <gradient> 数据类型的对象，此对象是一种特殊的 <image> 数据类型。

平时我们用的比较多的是用它来做渐变色背景，稍稍拓展下思路，就可以实现上面斜边圆角效果。

这是一个有角度的渐变

linear-gradient 中的<angle> 可以改变渐变线的角度，通过观察坐标轴找出渐变线角度和渐变走向的关系。

linear-gradient CSS实现斜边圆角长方形

左边蓝色的图形，是一个从右上往左下的渐变，可知渐变线角度为 225°（-135°）

找到关键位置

假设长方形高度 60px，计算出透明色 transparent 结束位置（也是颜色开始位置）为 60px * cos45° ≈ 42.42px (取 43px）， 圆角大小 30px。

linear-gradient CSS实现斜边圆角长方形

蓝色的渐变色值从 #4facfe 到 #00f2fe

有了以上几个值，我们可以写出蓝色图形的 CSS

 .rectangle1 {
        width: 270px;
        height: 60px;
        background: linear-gradient(225deg, transparent 43px,#4facfe 43px, #00f2fe 100%) ;
        border-radius:30px 0 0 30px;
    }

右边粉色图形渐变线角度为 45°，渐变色值从 #f5576c 到 #f093fb，CSS 如下

  .rectangle2 {
        width: 960px;
        height: 60px;
        background: linear-gradient(45deg, transparent 43px, #f5576c 43px, #f093fb 100%);
        border-radius:0 30px 30px 0;
        /* 和蓝色保持距离 */
        margin-left:-50px; 
    
    }

完整代码：

<!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>
    body { background-color: black;}
    .wrap {display: flex;}
    .rectangle1 {
        width: 270px;
        height: 60px;
        background: linear-gradient(225deg, transparent 43px,#4facfe 43px, #00f2fe 100%) ;
        border-radius:30px 0 0 30px;
    }
    .rectangle2 {
        width: 960px;
        height: 60px;
        background: linear-gradient(45deg, transparent 43px, #f5576c 43px, #f093fb 100%);
        border-radius:0 30px 30px 0;
        /* 和蓝色保持距离 */
        margin-left:-50px; 
    
    }
  </style>
  <body>
  <div class="wrap">
    <div class="rectangle1"></div>
    <div class="rectangle2"></div>
  </div>
  </body>
</html>

是不是很方便！又掌握一个 CSS 图形的画法。

有任何问题或者兴趣也可以在公众号：自由前端之路 找到我。

转载自:https://juejin.cn/post/7384274075231420454
评论
请登录