如何用CSS画三角形

很多时候页面都需要一个或者多个小型三角形！多数人直接用PS扣个图片预览

下面用CSS简单画几个最终效果如下图

 div /div 

 div /div 

 div /div 

 div /div 

 div /div 

.border-all-color {

 margin: 20px auto;

 width: 0;

 height: 0;

 border-top: 40px solid coral;

 border-right: 40px solid lightblue;

 border-bottom: 40px solid lightgreen;

 border-left: 40px solid mediumpurple;

.border-left-color,

.border-top-color,

.border-right-color,

.border-bottom-color{

 width: 0;

 height: 0;

 margin: 10px auto;

 border: 20px solid transparent;

.border-left-color{

 border-left-color: #9370DB;

.border-top-color{

 border-top-color: #FF7F50;

.border-right-color{

 border-right-color: #ADD8E6;

.border-bottom-color{

 border-top-color: #90EE90;

 }

纯 CSS 实现三角形的 3 种方式 CSS 提供了三种出色的方法可以实现基本的形状。本文就来看看如何使用这些方法来实现一个三角形。三种方法如下： border； linear-gradient； clip-path。
手撸一个在线css三角形生成器 为了提高 前端开发 效率, 笔者先后写了上百个前端工具, 有些是给公司内部使用的, 有些单纯是因为自己太“懒”, 不想写代码, 所以才“被迫”做的. 接下来介绍的一款工具——css三角形生成器也是因为之前想要解放设计师的生产力, 自己又懒得切图或者写css代码, 所以想来想去还是自己做一个能自动生成css三角形代码的工具吧.
水灵儿 www.zyl.me 爱折腾，喜欢造，花起钱来毫不心疼，事后沉默一周... 极简主义者，主从事Web开发兼前端爱好者。 全栈开发尝试者、自媒体、极简主义者、爱心极客