形状

自适应的椭圆

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 {

width: 400px;

transform: rotate(45deg);

overflow: hidden;

}

.picture > img {

max-width: 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;