CSS 样式实现三角形，搞定前端基础面试痛点

领航猿麦兜
360 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

我们的网页能够呈现出千变万化的风格，主要的功臣是 CSS 样式。CSS 样式看似简单的样式语言，但是在网页开发中非常灵活，主要发挥你的创意，就能实现很多你想象不到的效果，特别是 CSS3 样式诞生和广泛使用之后，更多新奇的 CSS 作品涌现出来。

例如，下图就是 CSS 样式实现效果图。

CSS实现灯笼动画_.gif

使用 CSS 实现三角形，我们面试中是一个高频面试考题，

  • CSS 实现三角形的场景有哪些？
  • 如何用 CSS 实现三角形。
  • 面试官主要考察什么？
  • 面试中如果遇到该问题，我们该如何回答？

三角形使用场景

在网页开发中，三角形使用场景非常多，比如掘金导航。

image.png

这样三角形实现的方式一般有两种，一种是图标，另一种是使用 CSS 样式实现。

那么如何使用我们 CSS 样式实现这样三角形。

采用 CSS 实现三角图标

三角形实现原理：宽度width为0；height为0；

（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid blue，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。

（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

triangle

image.png

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

triangle-up

image.png

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

triangle-down

image.png

.triangle-down {	
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
}

triangle-left

image.png

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

triangle-right

image.png

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

triangle-top-left

image.png

.triangle-top-left{
   width: 0;
    height: 0;
    border-top: 100px solid blue;
    border-right: 100px solid transparent;
  }

triangle-top-right

image.png

.triangle-top-right {
    width: 0;
    height: 0;
    border-top: 100px solid blue;
    border-left: 100px solid transparent;
 
}

triangle-bottom-left

image.png

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

triangle-bottom-right

image.png

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

面试主要考察什么

  • CSS 样式基本如何，能否使用 CSS 样式实现三角形。
  • 针对 CSS 性能是否有自己的思考，为什么要使用 CSS 实现三角形，好处是什么。

如何回答面试官

  • 说出使用 CSS 样式实现三角形的方案。
  • 扩展 CSS 样式实现其他图形原理以及应用场景，比如箭头、圆形、扇形。
  • 使用 CSS 实现三角形原因，比如可以从性能、带宽等方面。
avatar
文章
阅读
粉丝