CSS：纯CSS绘制三角形（原理）

最新推荐文章于 2023-11-01 14:11:45 发布

带刀预言家

最新推荐文章于 2023-11-01 14:11:45 发布

阅读量517

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_31628337/article/details/59123015

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

设置大边框的时候矩形的显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制三角形</title>
    <style type="text/css">
        #triangle{
            display: inline-block;
            width: 100px;
            height: 100px;
            border-left: 100px solid black;
            border-right: 100px solid red;
            border-top: 100px solid orange;
            border-bottom: 100px solid blue;
        }
    </style>
</head>
<body>
    <span id="triangle"></span>
</body>
</html>

结果如下
这里写图片描述

可以看到，当边框相对内容非常非常大的时候，在边框交界处会有明显交汇。
若此时将宽高改为0呢？

#triangle{
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left: 100px solid black;
    border-right: 100px solid red;
    border-top: 100px solid orange;
    border-bottom: 100px solid blue;
}

结果如下
这里写图片描述

像一个正方形被分成了四个三角形！这就给用纯css写一个三角形一个提示——将左右两边的边框变成透明，选择上或者下边框留下就可以了

上三角

#triangle{
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid orange;
    /*border-bottom: 100px solid blue;*/
}

这里写图片描述

下三角

#triangle{
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 100px solid orange;
    /*border-bottom: 100px solid blue;*/
}

这里写图片描述

带刀预言家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：纯CSS绘制三角形（原理）

设置大边框的时候矩形的显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绘制三角形</title> <style type="text/css"> #triangle{ display: inline-block; wi
复制链接

扫一扫