形状

自适应椭圆-border-radius

border-radius 的基本使用方法是设置成正方形的宽度或者高度的一半或者大于一半，就可以得到一个圆形

css
1div {
2  width: 200px;
3  height: 200px;
4  border-radius: 100px;
5  /* border-radius: 200px; */
6  也可以得到一个圆形background: #fb3;
7}

border-radius 还可以指定水平和垂直的半径

css
1border-radius: 100px/75px;

如果要得到自适应椭圆，则可以设置百分比

css
1border-radius: 50%/50%;
2border-radius: 50%; /*缩写*/

半椭圆

border-radius 接收按照顺时针的顺序设置左上，右上，右下，左下的切边圆角,所以设置半圆只需要将下面的两个角设置成一样的属性，上面的两个角设置成一样的属性即可实现半圆

css
1div {
2  width: 200px;
3  height: 200px;
4  border-radius: 50% 50% 0 0;
5  background: #fb3;
6}

结合设置每个角的水平、垂直方向的半径的特点，这么写还可以创造出一个半椭圆

css
1div {
2  width: 200px;
3  height: 200px;
4  border-radius: 50%/100% 100% 0 0;
5  background: #fb3;
6}

左半椭圆

css
1div {
2  width: 200px;
3  height: 200px;
4  border-radius: 100% 0 0 100%/50%;
5  background: #fb3;
6}

四分之一椭圆

css
1div {
2  width: 200px;
3  height: 200px;
4  border-radius: 100% 0 0 0;
5  background: #fb3;
6}

平行四边形

html
1<div>
2  <section>HTML</section>
3</div>

css
1div {
2  margin: 0 auto;
3  width: 100px;
4  height: 100px;
5  transform: skewX(-45deg); /*斜向拉伸*/
6  background: #fb3;
7}

如果平行四边形中有内容（如文字），可以采用嵌套元素抵消内容的倾斜

css
1section {
2  transform: skewX(45deg);
3}

菱形图片

hack 方式实现（需要在外层嵌套一个 div）

html
1<div>
2  <img src="./avatar.jpg" alt="" />
3</div>

css
1div {
2  width: 100px;
3  height: 100px;
4  transform: rotate(-45deg);
5  background: red;
6  overflow: hidden;
7}
8img {
9  max-width: 100%;
10  transform: rotate(45deg) scale(1.42);
11}

非 hack 方式

html
1<img src="./avatar.jpg" alt="" />

css
1img {
2  width: 100px;
3  height: 100px;
4  max-width: 100%;
5  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
6}

clip-path 属性允许我们将元素按照路径进行裁剪，如果使用百分比，则会解析为元素自身的尺寸

这个属性还支持动画效果

css
1img {
2  width: 100px;
3  height: 100px;
4  max-width: 100%;
5  transition: all 1s;
6  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
7}
8img:hover {
9  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
10}

clip-patg

切角效果

单切角效果

css
1div {
2  width: 100px;
3  height: 100px;
4  background-color: #58a;
5  background: linear-gradient(-45deg, transparent 15px, #58a 0);
6}

双切角效果

css
1div {
2  width: 100px;
3  height: 100px;
4  background-color: #58a;
5  background: linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, linear-gradient(
6        45deg,
7        transparent 15px,
8        #58a 0
9      ) bottom left;
10  background-size: 50% 100%;
11  background-repeat: no-repeat;
12}

四个角都切效果

css
1div {
2  width: 100px;
3  height: 100px;
4  background-color: #58a;
5  clip-path: polygon(
6    20px 0,
7    calc(100% - 20px) 0,
8    100% 20px,
9    100% calc(100% - 20px),
10    calc(100% - 20px) 100%,
11    20px 100%,
12    0 calc(100% - 20px),
13    0 20px
14  );
15}

折角效果

css
1div {
2  position: relative;
3  width: 200px;
4  height: 200px;
5  background: red; /* 回退样式 */
6  background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 /50px 50px, linear-gradient(
7      -135deg,
8      transparent 35px,
9      #58a 0
10    ); /* 50*0.7 */
11}

css
1div {
2  position: relative;
3  width: 200px;
4  height: 200px;
5  background: red; /* 回退样式 */
6  background: linear-gradient(-150deg, transparent 35px, #58a 0);
7  border-radius: 12.5px;
8}
9div::before {
10  content: '';
11  position: absolute;
12  top: 0;
13  right: 0;
14  width: 50px;
15  height: 60px;
16  background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.4)) 100% 0 no-repeat;
17  transform: translateY(-20px) rotate(-20deg);
18  transform-origin: bottom right;
19  border-bottom-left-radius: inherit;
20  box-shadow: -2px, 2px, 3px, -2px rgba(0, 0, 0, 0.15);
21}