纯CSS画三角原理解析

lidashuang 发布于2019-08-30 14:03 / 2791人阅读

摘要：纯画三角原理解析因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后想了一下感觉不知道具体原理是什么，很奇怪为什么边框能设置成三角的样式。

纯CSS画三角原理解析

因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后想了一下感觉不知道具体原理是什么，很奇怪为什么边框能设置成三角的样式。于是搜了一波原理整理如下

1.边框到底是什么样的？

因为很少用到很粗的边框，而且90%的情况下我们用边框都是一个颜色的。所以我发现我并不知道边框到底是什么样子的，一直一来我都以为四条边都是一条线（不要告诉我就我一个人这样认为）。

实验了一下才发现边框越来越粗的时候，很明显每条边都是一个梯形

2.如何做出三角？

因为之前看的代码都会写上width: 0; height: 0;当时不理解为什么，现在很容易就能想到，用极限的思维，当内容大小趋近与零的时候,每个边就是一个三角了。

这个时候就可以看到三角已经出现，我们要做的就是把其他边设置为透明的就可以得到我们需要的三角了。

3.还有没有更多的情况？

通过分别取消边框发现下面几种情况：

取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的

当仅有邻边时，两个边会变成对分的三角

当保留边没有其他接触时，极限情况所有东西都会消失。

4.拓展

明白了这些之后，再看代码是不是感觉就很清晰了呢？然后我们就可以做出更多形状的三角。有了这些形状再加上旋转属性，基本所有的场景都能使用。

直角三角

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 只设置三条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-left: transparent solid;
    border-width: 85px; 
    /* 其他设置 可有可无*/
    margin: 50px;
}

更小的直角三角形

利用对边的情况，做出更小的直角三角形

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 只设置两条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px; 
    /* 其他设置 */
    margin: 50px;
}

等腰锐角三角形

通过更改底边的长度可以做出各种不同的三角形

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 */
    border-top: #4285f4 170px solid;
    border-right: transparent 85px solid;
    border-left: transparent 85px solid;
     
    /* 其他设置 */
    margin: 50px;
}

对话气泡

把伪元素设置成三角，再通过定位确定位置，就可以制作出来经典的对话气泡了。

.bubbly {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #00ccbb;
    border-radius: 8px;
    width: 200px;
    padding: 40px 10px;
    text-align: center;
    color: white;
    font-size: 20px;

.bubbly:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 34px solid transparent;
    border-top-color: #00ccbb;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 -34px -17px;
}

总结

通过对四条边的长度的设置，还可以做出各种各样的三角形，几乎所有三角的形状都可以设置出来。
另外还可以通过设置宽高中的一项为0另一个不为0，来设置出体形的形状，大家可以自由实验

云服务器 GPU云服务器画三角形 html画三角箭头纯CSS css三角

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

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

纯css三角形及其应用

摘要：前言对于气泡对话框或者与内容连接部分会有小三角形效果，可能在以前直接用图片去实现，其实用纯即可实现，下面要实现的效果分别是微信对话框和面包屑，以此回顾记录一下。前言对于气泡对话框或者Popover与内容连接部分会有小三角形效果，可能在以前直接用图片去实现，其实用纯css即可实现，下面要实现的效果分别是微信对话框和面包屑，以此回顾记录一下。效果如下： showImg(https:/...

aaron 2019-08-30 14:04 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
前端每日实战 2018 年 5 月份项目汇总（共 30 个项目）

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

array_huang 2019-08-22 18:25 评论0 收藏0
前端每日实战 2018 年 5 月份项目汇总（共 30 个项目）

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

liaoyg8023 2019-08-30 15:54 评论0 收藏0