web前端入门到实战：CSS图形绘制合集

以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的，不少实现以前我介绍过，或者你也知道，但是有些相信你没见过。

1. 正方形

实时渲染效果如下：

相关CSS代码：

#square {
  width: 100px; height: 100px;
  background: red;
}

2. 长方形

效果：

相关CSS代码：

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
#rectangle {
  width: 200px; height: 100px;
  background: red;
}

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的

3. 正圆

这个显然借助圆角实现，效果如下：

相关CSS代码：

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

4. 椭圆

效果如下：

相比正圆就是尺寸有些不一样，相关CSS代码：

#oval {
  width: 200px; height: 100px;
  background: red;
  border-radius: 50%;
}

5. 向上三角

效果如下：

相关CSS代码：

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

6. 向下三角

效果如下：

相关CSS代码：

#triangle-down {
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

7. 方向朝左的三角

效果如下：

相关CSS代码：

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

8. 方向朝右的三角

效果如下：

相关CSS代码：

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

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的

9. 左上三角

效果如下：

相关CSS代码：

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
#triangle-topleft {
  width: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

也可以使用一个45°的斜向线性渐变实现，不过兼容性没有使用border实现好。

10. 右上三角

效果如下：

相关CSS代码：

#triangle-topright {
  width: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

也可以使用一个45°的斜向线性渐变实现，不过兼容性没有使用border实现好。

11. 左下角三角图形

效果如下：

相关CSS代码：

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

也可以使用渐变绘制。

12. 右下角三角图形

效果如下：

相关CSS代码：

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

也可以使用渐变绘制。

13. 弧形尾箭头

效果如下：

完整CSS代码：

#curvedarrow {
  position: relative;
  width: 0;
  border-top: 90px solid transparent;
  border-right: 90px solid red;
  transform: rotate(10deg) translateX(100%);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 30px solid red;
  border-radius: 200px 0 0 0;
  top: -120px; left: -90px;
  width: 120px; height: 120px;
  transform: rotate(45deg);
}

实际使用用不到这么大的图形，只要把CSS中所有的数值（不包括旋转）全部都缩小10倍就好了。