CSS3做直角三角形

切图仔

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

6090

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

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

原理和三角形一样为什么要做直角三角形？先来看如下案例（京东首页）

如图当看到价格栏时，你会想到怎么做？用之前提过的三角形思想

最主要的是左边部分左边部分是由矩形加直角三角形组成如下

因此只要我们能用css画出直角三角形问题就解决了步骤如下

div{
                width: 0;
                height: 0;
                border: 10px solid red;
                border-top-color: aqua;
                border-bottom-color: green;
                border-left-color: aliceblue;
                border-right-color: aquamarine;
            }

上面实现全三角形的代码，我在该代码的基础上去掉下边框

div{
                width: 0;
                height: 0;
                border: 10px solid red;
                border-top-color: aqua;
                border-left-color: aliceblue;
                border-right-color: aquamarine;
                border-bottom: 0;
            }

得到如下效果

此时已经快成功了，我们要使右边变成直角三角形，所以我们将上边框改大一点

div{
                width: 0;
                height: 0;
                border: 10px solid red;
                border-top:20px solid blue;
                border-left-color: aliceblue;
                border-right-color: aquamarine;
                border-bottom: 0;
            }