效果

index.html

html 复制代码

<!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>
    <link type="text/css" rel="styleSheet" href="index.css" />
  </head>
  <body>
    <div class="container">
      <button type="button"><span>倾斜按钮</span> </button>
    </div>
  </body>
</html>

index.css

css 复制代码

  /*设置button元素样式*/
button {
  width: 180px;
  height: 80px;
  /*设置button元素 背景颜色*/
  background: #000;
  /*设置button元素 无边框*/
  border: none;
  /*设置button元素 无轮廓线*/
  outline: none;
  /*设置button元素 将显示为块级元素*/
  display:  block;
  margin: 0 auto;
  /*设置button元素 字体颜色*/
  color:  #fff;
  /*设置button元素 字体大小*/
  font-size:  18px;
  /*设置button元素 圆角左上和右下的圆角15px*/
  border-radius: 15px 0;
  /*设置button元素 相对位置*/
  position: relative;
  /*设置button元素 倾斜-20°*/
  transform: skew(-20deg);
}
/*设置伪元素::before 的样式*/
button::before {
  content: '';
  /*绝对位置*/
  position: absolute;
  /*伪元素的宽度*/
  width: 20px;
  /*伪元素的高度*/
  height: 20px;
  /*伪元素的背景颜色为径向渐变背景*/
  /*circle at 0 0 设置圆心位置-左上角*/
  /*transparent 0 20px 从圆心开始到半径为 20px 的位置，逐渐变为透明*/
  /*transparent 0 20px 从圆心开始到半径为 5px 的位置，逐渐变为黑色,超过5px都为黑色*/
  background: radial-gradient(
    circle at 0 0,
    transparent 0 20px, 
    #000 5px
  );
  /*伪元素从父元素的底部开始绘制*/
  bottom: 0px;
  /*伪元素从父元素的左端-20px开始绘制*/
  left: -20px;
}

/*设置伪元素::after 的样式*/
button::after {
  content: '';
  /*绝对位置*/
  position: absolute;
  /*伪元素的宽度*/
  width: 20px;
  /*伪元素的高度*/
  height: 20px;
  /*伪元素的背景颜色为径向渐变背景*/
  /*circle at 100% 100% 设置圆心位置-右下角*/
  /*transparent 0 20px 从圆心开始到半径为 20px 的位置，逐渐变为透明*/
  /*transparent 0 20px 从圆心开始到半径为 5px 的位置，逐渐变为黑色,超过5px都为黑色*/
  background: radial-gradient(
    circle at 100% 100%,
    transparent 0 20px,
    #000 5px
  );
  /*伪元素从父元素的顶部开始绘制*/
  top: 0px;
  /*伪元素从父元素的右端-20px开始绘制*/
  right: -20px;
}

button span{
  /*设置button span元素 将显示为块级元素*/
  display: block;
  /*抵消按钮的倾斜，让文字回正*/
  transform: skew(20deg);
}

【CSS】倾斜按钮

效果

index.html

index.css