纯CSS实现三角形

网站设计中经常会用到一些简单的几何图形,如三角形、正方形、梯形。那么我们来看看三角形是怎么实现的。
我们先来创建一个宽度和长度为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;
}

运行结果:

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值