CSS实用方法 —— 三角形的编写

CSS3出现后，很多设计图我们都可以使用css实现， 今天我们一起讨论一下使用css实现三角形。

当我们设置三角形的时候通常是直接些border而把width和height设置为0；接下来我们尝试一次为四边设置不同的颜色，

.test-border{
    width:0px;
    height:0px;
    border-top:50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-right:50px solid #ff00ff;
    border-left:50px solid #ffff00;
}
复制代码

可以看出上面的代码效果为四个不同颜色的三角形，但是我们通常是需要其中一个，那怎么处理呢？这里需要的就是用到css样式值；transparent【透明】

修改一下上面的代码，将其他三边的颜色设置成transparent；即可得到一个三角形；效果如下；

代码：

.test-border{
        margin:10px;
        width:0px;
        height:0px;
        border:50px solid transparent;
        border-right-color:#ff0000;
    }
复制代码

那么试想一下我们去掉一个边会是什么效果呢？

.test-border{
    width:0px;
    height:0px;
    border-top:50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left:50px solid #ffff00;
}
复制代码

看一下效果吧。

那么现在我们再去掉一个边呢？

.test-border{
    width:0px;
    height:0px;
    border-top:50px solid #ff0000;
    border-left:50px solid #ffff00;
}
复制代码

效果如下：

那么看到这个效果。我们再结合transparent属性值，我们就可以轻松的实现下面这个效果了。

.test-border{
        margin:10px;
        width:0px;
        height:0px;
        border-top:50px solid #ff0000;
        border-right:50px solid transparent;
    }
复制代码

转载于:https://juejin.im/post/5b769f07e51d45665f302202