CSS中的小三角实现

切图仔

发布于 2022-09-08 16:10:10

47300

代码可运行

文章被收录于专栏：生如夏花绚烂生如夏花绚烂

运行总次数：0

代码可运行

在网页制作中我们如何实现小三角？如下京东官网

先来看如下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style>
            div{
                height: 0;
                width: 0;
                border:10px solid red;
                border-top-color: blue;
                border-right-color: aqua;
                border-bottom-color: bisque;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

代码很简单，我们设定元素高宽为0 ，并指定四个边框的颜色不同，就出现了下面的效果

基于这种特性，我们做小三角就很简单了，只需使其他三边为透明背景即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style>
            div{
                height: 0;
                width: 0;
                border:10px solid transparent;
                border-top-color: blue;

            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>