【前端】CSS绘制三角形、梯形

最新推荐文章于 2025-01-28 08:03:01 发布

转载最新推荐文章于 2025-01-28 08:03:01 发布 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_43359222/article/details/126897205

文章标签：

#前端 #css

本文介绍了如何利用CSS的border属性来创建三角形、等腰梯形和直角梯形。通过调整元素的宽、高、边框宽度及颜色，可以实现不同形状的图形。例如，设置宽高为0并调整边框颜色可以得到三角形；通过改变边框宽度和内容宽度则可形成梯形。

CSS 如何用border绘制三角形、等腰梯形、直角梯形
border 有宽度后，四角交接处会产生斜线，可根据此原理绘制三角形、等腰梯形、直角梯形等图形。

 div {
            width: 50px;
            height: 50px;
            border-width: 50px;
            border-style: solid;
            /* border-color: 上 右 下 左; */
            border-color: pink green blue gold;
        }

在这里插入图片描述

border 绘制三角形（将div中内容设置为0即宽高为0，可出现4个不同方向三角形）

div {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
             /* border-color: 上 右 下 左; */
            border-color: pink green blue gold;
        }

在这里插入图片描述

根据所需，将其他三个边框隐藏即可得到以下三角形

div {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent blue transparent;
        }

在这里插入图片描述

border 绘制等腰梯形（在绘制好三角形后如上图，将div内容的宽度设置一下，可得到一个等腰梯形，如对梯形宽度有需求，需注意内容的宽度与边框宽度）

    div {
            width: 100px;
            height: 0;
            border-width: 0 50px 100px 50px;
            border-style: solid;
            border-color: red transparent blue transparent;
        }

在这里插入图片描述

border 绘制直角梯形（去掉上边框和左边框宽度，添加内容宽度，即可得到直角梯形）

    div {
            width: 150px;
            height: 0;
            border-width: 0 50px 100px 0;
            border-style: solid;
            border-color: transparent transparent red transparent;
        }