如何用css绘制一个三角形？

一、前言

通常我们在开发过程中，像一些播放器的暂停按钮、或者是一些下拉框等等，都会用到三角形。

 一般我们会使用一些svg或者是icon图标来替代，那么有没有想过该怎么去绘制一个三角形呢？

废话不多说，接下来跟着咱们步伐一步一步往下走。

二、实现

其中使用了transparent（指定透明度），首先理解盒模型，将盒子的宽高设置为0，通过改变盒子的border属性实现。

1.顶部三角形

.border {
        width: 0;
        height:0;
        border-top:30px solid #96ceb4 ;
        border-left:30px solid transparent;
        border-right:30px solid transparent;
        margin: 10px 0 0 10px;
 }

效果图如下：

 2.底部正三角形

.border {
        width: 0;
        height:0;
        border-bottom:100px solid #96ceb4 ;
        border-left:100px solid transparent;
        border-right:100px solid transparent;
 }

效果图如下：

3.左侧三角形

.border {
        width: 0;
        height:0;
        border-top:100px solid transparent;
        border-left:100px solid #96ceb4 ;
        border-bottom:100px solid transparent;
 }

效果图如下：

 4.右侧三角形

 .border {
        width: 0;
        height:0;
        border-right:100px solid #96ceb4;
        border-bottom:100px solid transparent;
        border-top:100px solid transparent;
  }

效果图如下：

5.空心三角形 

 .border {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 50px 50px;
        border-color: transparent transparent #d9534f;
        position: relative;
    }

    .border:after {
        content: '';
        border-style: solid;
        border-width: 0 40px 40px;
        border-color: transparent transparent #96ceb4;
        position: absolute;
        top: 0;
        left: 0;
    }

    .border:after {
        content: '';
        border-style: solid;
        border-width: 0 40px 40px;
        border-color: transparent transparent #ffffff;
        position: absolute;
        top: 6px;
        left: -40px;
    }

效果图如下：

 三、参考

CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头 - 听风是风 - 博客园

transparent(指定透明度)_mc.byte的博客-CSDN博客_transparent属性

四、结束语

好的，今天三角形就先介绍到这里，各位小伙伴快动手试试吧，有一些更好的可以评论分享哦。