CSS 绘制三角形

最新推荐文章于 2023-04-11 10:00:22 发布

KDDA

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量199

点赞数

分类专栏：前端文章标签： CSS 绘图

本文链接：https://blog.csdn.net/Dream_On_324/article/details/84787476

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、WHY ? 为什么要用CSS画三角形？

三角形的绘制在前端开发中有很多应用场景，比如聊天气泡、按钮浮层等。

一般实现的话有两种方式：

1. 直接用切图，这是比较偷懒的方式，

优点：开发快

缺点：图形本身不够灵活，依赖切图、会消耗一次请求资源

2. 使用CSS绘制

优点：灵活、不消耗请求资源，渲染更快

*由上可知，本着能省则省的原则，使用CSS绘制能够减少请求成本，且更灵活（毕竟每次都三次握手还是挺费体力的XDD）

二、HOW? 怎么实现？

下面我们就来说一下如何使用CSS绘制三角形，以及其原理：

1. 首先你得知道什么是标准盒模型，margin + border + padding + content 笑而不语。

2. 开画！先画个带边框的普通矩形，如下图1

我们把矩形的宽度设为0会是什么样呢？如下图2

再把高度设为0如下图3

聪明的小伙伴已经知道了，只要我们把上、左、右的边框颜色设为透明，再把上边框的宽度设为0，就会变成下图这样

此时，三角形的上边框宽度，就是三角形顶部距离矩形上边的距离。三角形的高就是底边框的宽度，三角形的宽度就是左右边框宽度之和。那么假如我想做个直角三角形，只需要把左或右边框的宽度设为0即可，如下图（右边框为0）

三、Demo ~ Ctrl C + Ctrl V 天下无敌！

最后还是贴上代码，方便交流嘛 XDDD ....

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test draw triangle by CSS</title>
    <style>
        body > div {
            margin-bottom: 10px;
        }

        /* 矩形 */
        .rectangle {
            width: 100px;
            height: 100px;
            background: pink;
            border: 50px solid red;
        }

        /* 三角形 */
        .triangle {
            width: 0;
            height: 0;
            border-top-width: 0;
            border-color: transparent transparent blue transparent;
        }

        /* 左直角三角 */
        .left-straight-angle {
            border-left-width: 0;
        }

        /* 右直角三角 */
        .right-straight-angle {
            border-right-width: 0;
        }
    </style>
</head>

<body>
    矩形<div class="rectangle"></div>
    三角形<div class="rectangle triangle"></div>
    左直角三角形<div class="rectangle triangle left-straight-angle"></div>
    右直角三角形<div class="rectangle triangle right-straight-angle"></div>
</body>

</html>

效果如下：

KDDA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 绘制三角形

一、WHY ? 为什么要用CSS画三角形？三角形的绘制在前端开发中有很多应用场景，比如聊天气泡、按钮浮层等。一般实现的话有两种方式：1. 直接用切图，这是比较偷懒的方式，优点：开发快缺点：图形本身不够灵活，依赖切图、会消耗一次请求资源2. 使用CSS绘制优点：灵活、不消耗请求资源，渲染更快*由上可知，本着能省则省的原则，使用CSS绘制能够减少...
复制链接

扫一扫