UI 同学设计了上图效果，两个颜色图形代表 a，b 两个数据的百分占比，难点在这个斜边的实现，但是掌握了 CSS 的 linear-gradient，也就没什么难事了。
linear-gradient()
linear-gradient() CSS 函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像，其结果是 <gradient> 数据类型的对象，此对象是一种特殊的 <image> 数据类型。
平时我们用的比较多的是用它来做渐变色背景，稍稍拓展下思路，就可以实现上面斜边圆角效果。
这是一个有角度的渐变
linear-gradient 中的<angle> 可以改变渐变线的角度，通过观察坐标轴找出渐变线角度和渐变走向的关系。
左边蓝色的图形，是一个从右上往左的渐变，可知渐变线角度为 225°（-135°）
找到色标的关键位置
假设长方形高度 60px，计算透明色 transparent 结束位置（也是颜色开始位置）——下图粉色线段长度 60px * cos45° ≈ 42.42px (取 43px）， 圆角大小 30px。
蓝色的渐变色值从 #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 图形的画法 😄
原文始发于微信公众号（自由前端之路）：linear-gradient 纯CSS实现斜边圆角长方形
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/295117.html
