css实现斜边切线
2020-03-21 本文已影响0人
smallzip
效果图
斜边切线
要实现去采购和去充值这中间的斜切线效果
需要使用到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>
