用CSS代码写出的各种形状图形的方法，0基础学前端开发

在CSS中，我们可以使用不同的属性来绘制各种形状。以下是一些常用的方法：

1. 使用border属性创建三角形：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

2. 使用border-radius属性创建圆形：

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

3. 使用transform: rotate()方法创建平行四边形：

.parallelogram {
  width: 150px;
  height: 100px;
  background-color: red;
  transform: skew(20deg);
}

4. 使用linear-gradient创建彩色的图形：

.colorful-shape {
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, red, blue);
}

5. 使用clip-path属性创建多边形：

.polygon {
  width: 150px;
  height: 150px;
  background-color: red;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

6. 使用before或after伪元素和border-radius创建心形：

.heart {
  width: 100px;
  height: 100px;
  position: relative;
}
 
.heart:before,
.heart:after {
  content: "";
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  position: absolute;
  top: 0;
  left: 50px;
}
 
.heart:before {
  transform: rotate(-45deg);
}
 
.heart:after {
  transform: rotate(45deg);
}

这些方法可以创建各种形状，你可以根据自己的需求选择合适的方法。在实际开发中，你可以根据这些基本原理结合实际情况创建更复杂的形状。