CSS3做直角三角形

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

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

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

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

代码语言：javascript复制

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;
            }

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

代码语言：javascript复制

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

得到如下效果

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

代码语言：javascript复制

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;
            }

css 基础 原理

0 人点赞