css3实现各种奇形怪状按钮代码?下面编程教程网小编给大家分析一下梯形与平行四边形、矩形与圆角按钮、切角等各种图形。
1、梯形与平行四边形
<div class='btn parallelogram'>Parallelogram</div>
.parallelogram {
position: relative;
width: 160px;
height: 64px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #03f463;
transform: skewX(15deg);
}
}
2、矩形与圆角按钮
<div class='btn rect'>rect</div>、
<div class='btn circle'>circle</div>
.btn {
margin: 8px auto;
flex-shrink: 0;
width: 160px;
height: 64px;
}
.rect {
background: #f6ed8d;
}
.circle {
border-radius: 64px;
background: #7de3c8;
}
3、切角
<div class="clip-notching">notching</div>
.clip-notching {
background: linear-gradient(
45deg,
#f9d9e7,
#ff1493
);
clip-path: polygon(
15px 0,
calc(100% - 15px) 0,
100% 15px,
100% calc(100% - 15px),
calc(100% - 15px) 100%,
15px 100%,
0 calc(100% - 15px),
0 15px
);
}
4、箭头按钮
<div class="arrow">arrow</div>
&.arrow {
background: linear-gradient(
-135deg,
transparent 22px,
#04e6fb 22px,
#65ff9a 100%
)
top right,
linear-gradient(
-45deg,
transparent 22px,
#04e6fb 22px,
#65ff9a 100%
)
bottom right;
background-size: 100% 50%;
background-repeat: no-repeat;
}
5、内切圆角
<div class="mask-inset-circle">inset-circle</div>
.mask-inset-circle {
background: linear-gradient(45deg, #2179f5, #e91e63);
mask: radial-gradient(
circle at 100% 100%,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 100% 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 100%,
transparent 0,
transparent 12px,
#2179f5 13px
);
mask-repeat: no-repeat;
mask-position: right bottom, left top, right top, left bottom;
mask-size: 70% 70%;
}
6、圆角不规则矩形
<div class="skew">Skew</div>
.skew {
position: relative;
width: 120px;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
background: orange;
transform: skewX(15deg);
}
&::before {
content: "";
position: absolute;
top: 0;
right: -13px;
width: 100px;
height: 64px;
border-radius: 10px;
background: orange;
}
}
7、圆角按钮
<div class="outside-circle">outside-circle</div>
.outside-circle {
position: relative;
background: #e91e63;
border-radius: 10px 10px 0 0;
&::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
left: -20px;
bottom: 0;
background: #000;
background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
}
&::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
right: -20px;
bottom: 0;
background: #000;
background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
}
}
总结:css3
渐变(线性渐变 linear-gradient
、径向渐变 radial-gradient
、多重渐变)
遮罩 mask
裁剪 clip-path
变形 transform
沃梦达教程
本文标题为:css3实现各种奇形怪状按钮代码
基础教程推荐
猜你喜欢
- CSS实现HTML元素透明的方法小结 2024-04-06
- Ajax的简单实用实例代码 2023-02-01
- 详解css透明度之rgba和opacity的区别及兼容 2024-04-07
- css解决浮动导致父元素高度坍塌的几种方法 2023-12-21
- fastclick插件导致日期(input[type=”date”])控件无法被触发该如何解决 2023-12-02
- Unicode中的常用字母小结 2022-09-21
- javascript瀑布流布局实现方法详解 2023-12-23
- ajax 操作全局监测,用户session失效的解决方法 2022-12-28
- js实现鼠标移到链接文字弹出一个提示层的方法 2024-01-19
- vue移动UI框架滑动加载数据的方法 2024-03-10