CSS实现倾斜按钮
有时候，在菜单里面会出现倾斜的按钮
可以使用背景图片的方式，也可以使用纯css的方式，从效率上来说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>
button {
width: 180px;
height: 60px;
border: none;
background: #000;
outline: none;
color: #fff;
font-size: 18px;
}
</style>
</head>
<body style="text-align: center;">
<button>
<span>倾斜按钮</span>
</button>
</body>
</html>效果
步骤
1、设置圆角
圆角不能四个角都设置，设置左上和右下就可以了
button {
/* 设置左上和右下 15px 右上和左下为0 */
border-radius: 15px 0;
}效果如下
2、设置左下和右上的两个角
首先设置两个方块，这两个方块肯定是绝对定位，所以要将按钮设置为相对定位，然后给这个按钮加上一个::before，其中一个方块就把它设置成绝对定位，然后设置宽高，设置背景颜色
button::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f40;
}效果
目前这个方块在这个位置，需要把这个位置调整到左下角
button::before {
bottom: 0;
left: -20px;
}调整后效果如下
调整之后需要改变一下背景，这个背景不是一个纯色背景，而是一个渐变背景；圆心点在中间，中间向四周扩散；蓝色从最开始扩散5px，然后再红色从5px扩散到结束
/* 镜像渐变背景 */
background: radial-gradient(
circle at 50% 50%,
blue 0 5px,
red 5px
);效果
这跟最终效果的关系是：可以去设置扩散的圆心，不让它在中心了，而是让它在左上角，设置为0 0，
可以看到这个蓝色就是以左上角为圆心，向四周扩散，然后生效的是红色。
然后将蓝色区域放大，放大到20px，然后把蓝色变成透明，红色变成黑色，这样左下角就出来了
background: radial-gradient(
circle at 0 0,
transparent 0 20px,
#000 5px
);
用同样的方式可以实现右上角
button::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
/* 镜像渐变背景 */
background: radial-gradient(
circle at 0 0,
transparent 0 20px,
#000 5px
);
top: 0;
right: -20px;
}
发现右上角的位置不对，就要改变它的扩散圆心点，把它从左上的扩散变成右下的扩散，改变圆心点即可
background: radial-gradient(
circle at 100% 100%,
transparent 0 20px,
#000 5px
);
这样整个效果就差不多了，然后就把整个按钮倾斜。
倾斜按钮
将按钮倾斜-20deg
/* 倾斜 -20deg */
transform: skew(-20deg);
效果实现了，发现文字也倾斜了
扶正文字
只需要将文字扶正，反向倾斜20deg就可以了
button span {
display: block;
transform: skew(20deg);
}这样最终效果就实现了
全部代码
<!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>
button {
position: relative;
width: 180px;
height: 60px;
border: none;
background: #000;
outline: none;
color: #fff;
font-size: 18px;
/* 设置左上和右下 15px 右上和左下为0 */
border-radius: 15px 0;
/* 倾斜 -20deg */
transform: skew(-20deg);
}
button::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
/* 镜像渐变背景 */
background: radial-gradient(circle at 0 0,
transparent 0 20px,
#000 5px);
bottom: 0;
left: -20px;
}
button::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
/* 镜像渐变背景 */
background: radial-gradient(circle at 100% 100%,
transparent 0 20px,
#000 5px);
top: 0;
right: -20px;
}
button span {
display: block;
transform: skew(20deg);
}
</style>
</head>
<body style="text-align: center;">
<button>
<span>倾斜按钮</span>
</button>
</body>
</html>