提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

CSS3做直角三角形

css3
2023-06-13 09:12:15 时间

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

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

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

因此只要我们能用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;
            }

相关文章