如何用css画三角形

Yuqi 发布于2019-08-30 13:06 / 2176人阅读

摘要：那问题来了，如何用来画三角形呢别着急，先来看看我所遇到过的三角形。如下图，有实心三角形，空心的，还有可以归为三角形的小箭头。画一个三角形，首先想到的是如何画三角形的形状，然后给一个背景颜色。

在设计稿中，经常会出现好多三角形，如果将三角形变成图片，通过img标签的src或者background中的url来访问，从前端性能方面来看这并不好。那问题来了，如何用css来画三角形呢？别着急，先来看看我所遇到过的三角形。如下图，有实心三角形，空心的，还有可以归为三角形的小箭头。

先来说说实心的三角形。

画一个三角形，首先想到的是如何画三角形的形状，然后给一个背景颜色。但是在写div时，会发现，div是的边框是直线。那么，我想到，要是给div的高和宽设置为0，然后设置四个border不同的颜色，那么这个颜色会重叠覆盖么？ps：当然会想到设置padding或者margin值，但是这两种属性无法设置颜色。

#triangle02{
    width: 0;
    height: 0;
    border-top: 50px solid blue;
    border-right: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid yellow;
    }

因为我们只想要一个三角形，如果把其他三个三角形的颜色变白，那就只剩下一个，等等，如果背景颜色不是白色呢？css中有这样一个属性，transparent，背景透明。这样便可以达到我们的目的了。

#triangle03{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid blue;
    }
#triangle04{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-right: 50px solid red;
    }
#triangle05{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    }
#triangle06{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 50px solid yellow;
    }

上面的代码就可以实现，四个不同方向的三角形了。

设计稿中可能还会出现高和底长度有限制的三角形，这里以第三个绿色三角形为例。看上面的代码，我们可以发现，三角形的底为border的两倍，border-bottom为三角形的高。来看下面这组三角形：

#my01{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    }
#my02{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 80px solid green;
    }
#my03{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 100px solid green;
    }
#my04{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 150px solid green;
    }

#my11{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 100px solid green;
    }
#my12{
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-bottom: 100px solid green;
    }
#my13{
    width: 0;
    height: 0;
    border: 90px solid transparent;
    border-bottom: 100px solid green;
    }
#my14{
    width: 0;
    height: 0;
    border: 110px solid transparent;
    border-bottom: 100px solid green;
    }

够详细吧~

那个小箭头的三角形，主要运用了css3的transform中的rotate()，我们后续再介绍吧！

云服务器 GPU云服务器如何用css 画三角形 html画三角箭头 css三角形

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115306.html

前端每日实战：155# 视频演示如何用纯 CSS 创作一只热气球

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，容器中有个子元素，代表伞盖，代表吊篮居中显示定义容器的尺寸，子元素和纵向居中布局先画伞盖。 showImg(https://segmentfault.com/img/bVbh6vq?w=400&h=300); 效果预览按下右侧的点击预览按钮可以在当前页面...

2bdenny 2019-08-29 16:57 评论0 收藏0
前端每日实战：155# 视频演示如何用纯 CSS 创作一只热气球

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，容器中有个子元素，代表伞盖，代表吊篮居中显示定义容器的尺寸，子元素和纵向居中布局先画伞盖。 showImg(https://segmentfault.com/img/bVbh6vq?w=400&h=300); 效果预览按下右侧的点击预览按钮可以在当前页面...

KavenFan 2019-08-02 11:41 评论0 收藏0
前端每日实战 2018 年 5 月份项目汇总（共 30 个项目）

摘要：过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演过往项目 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 5 月份发布的项目《前端每日实战》专栏每天分解一个前端项目，用视频记录...

array_huang 2019-08-22 18:25 评论0 收藏0