纯CSS实现三角形

最新推荐文章于 2023-02-02 13:51:02 发布

原创最新推荐文章于 2023-02-02 13:51:02 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#css

CSS 专栏收录该内容

2 篇文章

订阅专栏

网站设计中经常会用到一些简单的几何图形，如三角形、正方形、梯形。那么我们来看看三角形是怎么实现的。
我们先来创建一个宽度和长度为100px的div，并把四条边的宽度也设置为100px，同时各自设置一种颜色。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            .one{
                width: 100px;
                height: 100px;
                border-top: 100px solid red;
                border-bottom: 100px solid blue;
                border-left: 100px solid #111;
                border-right: 100px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

运行结果：

这里写图片描述

那我们把border-top给注释了看会怎样

.one{
    width: 100px;
    height: 100px;
    /*border-top: 100px solid red;*/
    border-bottom: 100px solid blue;
    border-left: 100px solid #111;
    border-right: 100px solid #ccc;
}

运行结果：
这里写图片描述

上图显示的是border-top被注释的结果，试想一下，不注释而改为设置transparent呢？

.one{
    width: 100px;
    height: 100px;
    border-top: 100px solid transparent;
    border-bottom: 100px solid blue;
    border-left: 100px solid #111;
    border-right: 100px solid #ccc;
}

运行结果：

这里写图片描述

是不是发现了一些规律…

但是显示的结果中都是梯形，内有出现三角形，该怎么解决呢？

我们再来试试把div的宽度和高度设置为0px

.one{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-bottom: 100px solid blue;
    border-left: 100px solid #111;
    border-right: 100px solid #ccc;
}

运行结果：

这里写图片描述

看，出现三角形，但是有四个，我们需要把另外三个去掉。

.one{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;
    /*border-right: 100px solid #ccc;*/
}

运行结果：

这里写图片描述

我们在改变一下代码，还可以调换一下三角形的角度

.one{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    /*border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;*/
    border-right: 100px solid transparent;
}