CSS 如何用border绘制三角形、等腰梯形、直角梯形

最新推荐文章于 2024-07-10 16:05:14 发布

我是一名路过的菜鸟

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量3.1k

点赞数 4

分类专栏： web 文章标签： css html 前端

本文链接： https://blog.csdn.net/qq_43359222/article/details/126897205

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS的border属性来创建三角形、等腰梯形和直角梯形。通过调整border宽度和颜色，可以实现不同方向和形状的图形。例如，通过设置四个边框的颜色，当内容宽度为0时，可以得到不同方向的三角形。进一步调整内容宽度和边框宽度，可以绘制出等腰梯形和直角梯形。这种方法是前端开发中创建特殊形状的一种实用技巧。

摘要由CSDN通过智能技术生成

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;
        }