【CSS】倾斜按钮

少莫千华

已于 2023-08-04 16:36:52 修改

阅读量869

点赞数 1

分类专栏：语言-HTML 文章标签： css skew radial-gradient 伪元素 border-radius before after

于 2023-08-04 16:36:00 首次发布

本文链接：https://blog.csdn.net/chenlu5201314/article/details/132107451

版权

语言-HTML 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

效果

在这里插入图片描述

index.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

  /*设置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);
}

少莫千华

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【CSS】倾斜按钮

transform: skew(-20deg); 倾斜 transform: skew(20deg); 抵消倾斜 background: radial-gradient(circle at 100% 100%,transparent 0 20px,#000 5px);设置伪元素的径向背景颜色 button::before、button::after使用伪元素 border-radius: 15px 0;设置button元素圆角左上和右下的圆角15px
复制链接

扫一扫