css直角线_CSS3做直角三角形

原理和[三角形](https://www.zihanzy.com/articles/164)一样

为什么要做直角三角形？

先来看如下案例(京东首页)


如图当看到价格栏时，你会想到怎么做？

用之前提过的三角形思想

最主要的是左边部分

左边部分是由矩形加直角三角形组成

如下


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

}

```