【CSS】CSS实现三角形

前言

【目的】

• 通过总结小伙伴们面试涉及到的问题，来进行前端知识的查漏补缺
• 给准备面试的小伙伴总结知识，也帮助自己更深入的了解前端知识。

【内容】

• 首先将介绍相关内容
• 然后列出常见的面试题型。

【温馨提示】

• 笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。

知识介绍

方法一：使用 border (常见)

【解释】不设置宽高，用边框大小控制三角型大小

【分解步骤】

1. 设置一个div不设宽高【示例】<style>#triangle{width: 0;height: 0;border: 100px solid;border-color: orangered skyblue gold yellowgreen;}</style>
2. 设置透明- 留下想要指向方向相反的边框设定，其他方向的边框设为transparent透明【示例】实现指向向上的三角形<style>.Up{width: 0;height: 0;border-top: 100px solid transparent;border-right: 100px solid transparent;border-left: 100px solid transparent;border-bottom: 100px solid orangered;}</style>【效果图】指向上，指向下，指向左，指向右

如何设置不同的三角形

• 可以通过调整不同方向边框的值来实现不同方向和大小的三角形

方法二：使用 linear-gradient

【解释】两色渐变，调为实色，一色透明

【分解步骤】

1. 两色渐变<style>.first{background:linear-gradient(45deg, deeppink, yellowgreen);}</style>
2. 调为实色<style>.second{background:linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);}</style>
3. 一色透明<style>.second{background:linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);}</style>

【效果图】

如何设置不同的三角形

• 通过旋转 rotate 或者 scale，也能得到各种角度，不同大小的三角形

方法三：使用 clip-path

【解释】裁剪多边型的方式，创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

【示例】

<style>div{width: 100px;height: 100px;background: gold;clip-path:polygon(0 0, 0 100%, 100% 100%);}</style>

clip-path

：

• polygon(x1``````y1，x2``````y2，x3``````y3)；

了解更多clip-path属性

【效果图】

如何设置不同的三角形

• 可以借助CSS clip-path maker

方法四：利用字符

三角形形状的字符的十进制 Unicode 表示码

<divclass="one">&#9658;</div><divclass="two">&#9660;</div><divclass="three">&#9650;</div><divclass="four">&#8895;</div><divclass="five">&#9651;</div>

【效果图】

【注意】用

font-size

控制大小，用

color

控制颜色

面试常见题目

简答题

【类似题目】

用CSS实现三角形

CSS画正方体，三角形

如何画一个三角形

…

结语

【感谢】

感谢程序员鱼皮提供面试鸭平台!!!

感谢各位读者能看到最后!!!