ایجاد شکل های زیبا با CSS — از صفر تا صد

1.box {
2  width: 200px;
3  height: 200px;
4  
5  border-top: 10px solid lightgreen;
6  border-right: 10px solid mediumpurple;
7  border-bottom: 10px solid lightsalmon;
8  border-left: 10px solid moccasin;
9}

1.box {
2  width: 0;
3  height: 0;
4  
5  border-top: 100px solid lightgreen;
6  border-right: 100px solid mediumpurple;
7  border-bottom: 100px solid lightsalmon;
8  border-left: 100px solid moccasin;
9}

1.box {
2  width: 0;
3  height: 0;
4  
5  border-top: 100px solid transparent;
6  border-right: 100px solid transparent;
7  border-bottom: 100px solid lightsalmon;
8  border-left: 100px solid transparent;
9}

1.box {
2  width: 0;
3  height: 0;
4  
5  border-top: 100px solid transparent;
6  border-right: 100px solid transparent;
7  border-bottom: 100px solid lightsalmon;
8  border-left: 100px solid transparent;
9  
10  transform: translateX(-100px) translateY(-100px) rotate(-45deg);
11}

1.heart {
2  position: relative;
3  
4  width: 200px;
5  height: 160px;
6}.heart:before,
7.heart:after {
8  position: absolute;
9  content: "";
10  
11  width: 100px;
12  height: 160px;
13  left: 100px;
14  
15  background-color: tomato;
16  
17  border-radius: 100px 100px 0 0;
18  
19  transform: rotate(-45deg);
20  transform-origin: 0 100%;
21}

1.heart {
2  position: relative;
3  
4  width: 200px;
5  height: 160px;
6}.heart:before,
7.heart:after {
8  position: absolute;
9  content: "";
10  
11  width: 100px;
12  height: 160px;
13  left: 100px;
14  
15  background-color: tomato;
16  
17  border-radius: 100px 100px 0 0;
18  
19  transform: rotate(-45deg);
20  transform-origin: 0 100%;
21}.heart:after {
22  left: 0;
23  
24  transform-origin: 100% 100%;
25  transform: rotate(45deg);
26}

1.diamond {
2  width: 200px;
3  height: 0;
4  
5  border-top: 100px solid lightgreen;
6  border-right: 100px solid mediumpurple;
7  border-bottom: 100px solid hotpink;
8  border-left: 100px solid moccasin;
9}

1.diamond {
2  position: relative;
3  
4  width: 200px;
5  height: 0;  /* border-top: 100px solid lightgreen; */
6  border-right: 100px solid transparent;
7  border-bottom: 80px solid hotpink;
8  border-left: 100px solid transparent;
9}

1.diamond {
2  position: relative;
3  
4  width: 200px;
5  height: 0;
6    
7  border-right: 100px solid transparent;
8  border-bottom: 80px solid hotpink;
9  border-left: 100px solid transparent;
10}.diamond:after {
11  content: "";
12  position: absolute;  border-top: 300px solid hotpink;
13  border-right: 200px solid transparent;
14  border-left: 200px solid transparent;
15  
16  transform: translateX(-100px) translateY(80px);
17}

1.magnifying-glass {
2  position: relative;
3  
4  width: 100px;
5  height: 100px; 
6  
7  box-sizing: border-box;
8  background-color: aliceblue;
9  
10  border: 15px solid slategray;
11  border-radius: 50%;
12}

1.magnifying-glass {
2  position: relative;
3  
4  width: 100px;
5  height: 100px; 
6  
7  box-sizing: border-box;
8  background-color: aliceblue;
9  
10  border: 15px solid slategray;
11  border-radius: 50%;
12}.magnifying-glass:after {
13  content: "";
14  position: absolute;
15  bottom: 0;
16  right: 0;
17  
18  width: 50px;
19  height: 15px;
20  background-color: slategray;
21  
22  border-radius: 0 7.5px 7.5px 0;
23  
24  transform-origin: 0 50%;
25  transform: translateX(100%) rotate(45deg);
26}

1<div class="heart-wrapper">
2  <div class="heart"></div>
3</div>

1.heart {
2  position: relative;
3  
4  width: 200px;
5  height: 160px;
6}.heart:before,
7.heart:after {
8  position: absolute;
9  content: "";
10  
11  width: 100px;
12  height: 160px;
13  left: 100px;
14  
15  background-color: tomato;
16  
17  border-radius: 100px 100px 0 0;
18  
19  transform: rotate(-45deg);
20  transform-origin: 0 100%;
21}.heart:after {
22  left: 0;
23  
24  transform-origin: 100% 100%;
25  transform: rotate(45deg);
26}.heart-wrapper {
27  cursor: pointer;
28  
29  width: 200px;
30  height: 160px;
31  
32  transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
33}.heart-wrapper:hover {
34  transform-origin: 50% 50%;
35  transform: scale(1.3);
36}