用CSS实现三角形的制作

用CSS实现三角形的制作

1.原理

如下图所示，当border的宽度足够大的时候，每个边框都会呈现出一个梯形

（画的太丑了别介意昂）

<style>
.itme {
            width: 50px;
            height: 50px;
            background-color: #000;
            border: 70px solid red;
            margin-bottom: 70px;
        }
</style>

那如果当盒子设置为 ***width：0px；heigth：0px；*** 时候会有什么样子的效果？
那么每个边就会呈现出一个三角形

<style>
.itme {
            width: 50px;
            height: 50px;
            background-color: #000;
            border: 70px solid red;
            margin-bottom: 70px;
        }
</style>

2.实现上下左右四个三角形

当你需要那个方向的三角形，那么你就将剩下的三个边的颜色写成 transparent 就能实现如下图的效果

代码如下：

<style>
		.div2>div {
            display: inline-block;
        }
		.div1>div {
            display: inline-block;
       	 }
		.box1 {
            width: 0px;
            height: 0px;
            border: 20px solid transparent;
            border-left: 20px solid red;
        }

        .box2 {
            width: 0px;
            height: 0px;
            border: 20px solid transparent;
            border-right: 20px solid red;
        }

        .box3 {
            width: 0px;
            height: 0px;
            border: 20px solid transparent;
            border-top: 20px solid red;
        }

        .box4 {
            width: 0px;
            height: 0px;
            border: 20px solid transparent;
            border-bottom: 20px solid red;
        }
</style>

3.实现更大的三角形

如下图这样的三角形的实现，其实就是用两个边框拼接出来的

<style>

	.box5 {
            width: 0px;
            height: 0px;
            border: 40px solid transparent;
            border-left: 40px solid red;
            border-bottom: 40px solid red;
        }

        .box6 {
            width: 0px;
            height: 0px;
            border: 40px solid transparent;
            border-right: 40px solid red;
            border-bottom: 40px solid red;
        }

        .box7 {
            width: 0px;
            height: 0px;
            border: 40px solid transparent;
            border-right: 40px solid red;
            border-top: 40px solid red;
        }

        .box8 {
            width: 0px;
            height: 0px;
            border: 40px solid transparent;
            border-left: 40px solid red;
            border-top: 40px solid red;
        }
</style>

4.实现梯形

4.1第一种方法（拼接）

就像3中拼接三角形的方法一样，我们用三个盒子来拼接出一个梯形

<style>
.tixing1 {
            width: 0px;
            height: 0px;
            border: 40px solid transparent;
            border-right: 40px solid red;
            border-bottom: 40px solid red;
        }

        .tixing2 {
            width: 80px;
            height: 80px;
            background-color: red;
        }

        .tixing3 {
            width: 0px;
            height: 0px;
            border: 40px solid transparent;
            border-left: 40px solid red;
            border-bottom: 40px solid red;
        }
</style>

4.2 第二种方法

在一个div中实现就是我们上面所讲的原理部分给div一个较小的宽高并且给background-color:transparent；

<style>
.tixing_2 {
            width: 50px;
            height: 50px;
            border: 80px solid transparent;
            border-left-color: red;
        }
</style>