自适应的椭圆
border-radius: 50% / 50%; => border-radius: 50%;
自适应半椭圆
横向： border-radius: 50% / 100% 100% 0 0;
纵向： border-radius: 100% 0 0 100% / 50%;
平行四边形
以嵌套元素方案解决
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
使用伪元素解决
.button {
position: relative; 其他的文字颜色、内边距等样式……
}
.button::before {
content: ''; 用伪元素来生成一个矩形
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}
当变形一个元素样式而不想变形它的内容时都可用伪元素方式解决。
菱形
基于变形的方案
.picture {
400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max- 100%;
transform: rotate(-45deg) scale(1.42);
}
通过裁剪路径clip-path实现
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
切角效果
使用渐变实现切角效果
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
使用弧形切角
background: #58a;
background:
radial-gradient(circle at top left,transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;