媛代码社区

如何使用 CSS 绘制三角形

技术
codinggirls
· 阅读 404 · 评论 2 · 1 年前

 

在这篇文章中,我们会用三种不同的CSS 方式绘制三角形,并总结每种情况的优缺点。其中之一是比较传统的使用 border绘制,另外两个是分别使用`clip-path` 和 `liner-gradient()`绘制。

使用 border

使用 border 是 CSS 绘制三角形最经典的方式也是目前最流行的一个方案。它的主要思想是设置元素的 width 和 height 等于 0,三角形实际的宽度和高度取决于border的宽度。

我们拿顶点向上三角形举例

 

知道具体思想后,同理可以设置不同顶点方向的三角形代码如下

<div class="arrow-up"></div>

<div class="arrow-down"></div>

<div class="arrow-left"></div>

<div class="arrow-right"></div>
.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
}
.arrow-right {
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}
.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid blue;
}

利用 border 绘制三角形适用于所有的浏览器,但是这种绘图方式并不是 border 属性专门设计的解决方案,所以当我们想要在三角形内添加内容的时候,并不会出现我们预期的效果

优点:

* 兼容性: 所有的浏览器都兼容此方法

* 简单: 使用简单,易于理解

缺点:

* 如果在三角形中添加内容的话,并不能满足我们的需求

 使用background-image

使用 background-image 属性绘制三角形,在这里我们无需引入图片,使用linear-gradient来完成三角形的绘制。

主要思想

1. 添加linear-gradient属性,朝着右下角添加在 50%的位置 由透明到红色的线性渐变

2. 添加linear-gradient属性,朝着右上角添加在 50%的位置 由红色到透明的线性渐变

3. 设置两个渐变区域的宽度为50%背景宽度

4. 将两个渐变区域定位到一左一右

 

代码实现

<div class="triangle"></div>
.triangle {
    width: 300px;
    height: 300px;
    background-image:
    linear-gradient(to bottom right, transparent 50%, red 0),
    linear-gradient(to top right, red 50%, transparent 0);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: left, right;
}

这种方式绘制出的三角形他的容器依然是一个长方形,所以如果我们在容器内添加内容的话操作起来不会有太多的局限性。

优点:

* 兼容:浏览器兼容性很好

* 响应式: 它会随着容器的尺寸改变而改变

* 完美添加内容:容器的大小不会因为背景设置的改变而改变,所以添加文本或其它内容很简单

缺点:

* 实现起来复杂,不易理解

使用clip-path

 

 

代码实现

<div class="triangle"></div>
.triangle {
    width: 300px;
    height: 300px;
    background: red linear-gradient(red, blue);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

使用这种方式要特别注意的是,裁剪区以外的部分全部不可视,包括内容和像border 、shadow、outline等的属性。

polygon只是clip-path 众多属性中的一个,你可以用 clip-path 的其他属性裁剪出任意你想要的图形。

优点:

* 简单:clip-path 功能强大且用途广泛,允许任何形状,而不仅仅是三角形

* 响应式: 他会根据容器的大小进行调整

* 可定制: 渐变和效果只要在可见区域内就不是问题

缺点:

* 兼容性: 浏览器兼容性不是很好

* 容易出错: 裁剪区以外的所有内容都不显示,可能导致意想不到的结果

总结

 

CSS一直在不断的迭代更新,现在有绘图属性 clip-path 和 background-image,这使绘制三角形更加多样性,而且比border 更加灵活和易于维护。我们用锤子把钉子钉在墙上而不是用螺丝刀,同样的,比起死板的 border方式,使用更适合的方式完成任务会更符合我们的预期。当然,没有绝对的好与不好,只有适合与不适合,在使用过程中可以根据问题情况酌情选择方案。

1
2
帖子评论(2)
发起评论
暂无数据
Loading
推荐帖子
  • 想自己做一个刷题的程序,请问在哪里...
  • 为什么v-for遍历写在子标签上会报错
  • 河南下大雨了,朋友圈发的地铁里水深...
  • C的栈帧结构
  • 更新日志
社区宗旨
媛代码社区是女性科技从业者的聚集地
我们鼓励:
分享生活经验,日常趣事
晒晒您的作品,讨论讨论技术
也可以吐槽职场,抱怨不公
我们致力于:
让更多的人听到我们的声音
打破社会传统偏见!提升个人能力!
快来加入媛代码大家庭吧!
加入组织
二维码

媛代码社区微信公众号