css实现三角形

我们很多时候都需要一些小图标小的icon什么，每次要img还得加载比较麻烦，用css就简单方便多了
实现三角形有两种思路，一种是border，一种是transform中的rotate

border

先认识盒模型

margin
margin area用来分隔相邻的元素，上下注意外边距融合，是透明空白区域，可以outline、box-shadow等等效果

border
顾名思义，就是围绕内边距和内容外的边框，可以控制border的相关样式，我们最合适的三角形靠它来实现的

padding
内容或者content的内边距，会受到背景、颜色或者图片的影响

content
内容区域，处于盒子模型的最里层也是最重要的一层，用来显示子元素和文本、图像这些内容的

在padding为0、width和height都为0时，padding area和content area都没有大小了，
此时设置border，且top、right、bottom、left设置不同颜色之后就会类似下图一样

很明显，在浏览器中border各个方向就是这么划分各自势力范围的

在实际项目中，当需要实心的三角形时我们可以只设置所需要方向的一边所需要颜色，相邻两边设置大小但设置背景色透明，不需要的一边就不要设置了，比方说设置一个向上的三角形

<style>
.example1{width:300px;padding-top:100px;height:200px;background-color:rgba(0,0,0,0.1)}
/* 下面才是三角形 */
.e1-angle{
	margin:0 auto;
	width:0;
	height:0;	/* 宽高0，content就没有内容了 */
	padding:0;	/* 可以不设，不设都是0，padding也没有了 */
	border-top:none;	/* 看那张图，可以不设，不设也是空 */
	border-left:50px solid transparent;	
	border-right:50px solid transparent;
	/* 左右两边设透明 */
	border-bottom:50px solid #000;	
}
</style>
<div class="example1">
	<div class="e1-angle"></div>
</div>

在chrome中选择dom元素查看的效果图如下

如果组合写一个提示框可以利用伪元素去实现
伪元素是通过css给指定元素创建的，通常会配合content属性来为该元素添加装饰内容

<style>
    .example2{
        padding-top:100px;
        width:300px;
        height:200px;
        background-color:rgba(0,0,0,0.1);
    }
    .box{
        width:200px;
        height:100px;
        margin:0 auto;
        position: relative;	/* 父元素相对定位 */
        background-color: #fff;
        border-radius: 10px;
    }
    .box::before{	/* 伪元素来实现三角形效果 */
        content: '';	/*伪元素content属性一定要设置 */
        position: absolute;	/* 子元素绝对定位 */
        bottom:100%;
        left:50%;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-bottom:10px solid #fff;
        margin-left:-5px;
    }
</style>
<div class="example2">
    <div class="box"></div>
</div>

效果图如下

有时候还有种情况，希望出现某纯色的边框，这种情况下需要两个伪元素，并且通过一个伪元素覆盖另一个伪元素来模仿边框

<style>
    .example3{
        padding-top:100px;
        width:300px;
        height:200px;
        background-color:rgba(0,0,0,0.1);
    }
    .box1{
        width:200px;
        height:100px;
        margin:0 auto;
        position: relative;
        background-color: #fff;
        border-radius: 10px;
        border:1px solid #000000;
    }
    .box1::before,.box1::after{
        content: '';
        position: absolute;
        left:50%;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        margin-left:-5px;
    }
    .box1::before{
         top:-10px;
         border-bottom:10px solid #000;
     }
    .box1::after{	
        top:-9px;
        border-bottom:10px solid #fff;
        /* 用后一个伪元素覆盖前一个伪元素 */
        /* 看起来像一条边一样 */
    }
</style>
<div class="example3">
    <div class="box1"></div>
</div>

效果图如下

transform

transform属性转换由盒子模型定位的元素，使元素可以2D或3D转换，允许对元素进行旋转、缩放、移动或倾斜。
我们这里用到的是ratate，旋转45度就好了
唯一的麻烦就是需要box的子元素覆盖在旋转的伪元素上，还要注意元素的z-index

<style>
    .example4{
        padding-top:100px;
        width:300px;
        height:200px;
        background-color:rgba(0,0,0,0.1);
    }
    .box2{
        width:200px;
        height:100px;
        margin:0 auto;
        position: relative;       
    }
    .box2::before{
        content: '';
        width:20px;
        height:20px;
        position: absolute;
        top:-10px;
        left:50%;
        -webkit-transform: rotate(45deg);	/* chrome */
        -moz-transform: rotate(45deg);	/* firefox */
        -ms-transform: rotate(45deg);	/* ie */
        -o-transform: rotate(45deg);	/* opera */
        transform: rotate(45deg);	/* transform要写兼容性 */
        margin-left:-10px;
        background-color: #000;	/* 黑色的背景是为了看三角形的效果 */
    }
    .box2 .content{
    	/* 通过content的层级盖住伪元素下边多出的一半 */
        width:100%;
        height:100%;
        position: relative;
        background-color: #fff;
        border-radius: 10px;
    }
</style>
<div class="example4">
    <div class="box2">
        <div class="content"></div>
    </div>
</div>

效果图如下

如果也跟border里需要实现带边框的效果，实现起来相对border比较麻烦，但也是可以实现的

<style>
    .example5{
        padding-top:100px;
        width:300px;
        height:200px;
        background-color:rgba(0,0,0,0.1);
    }
    .box3{
        width:200px;
        height:100px;
        margin:0 auto;
        position: relative;
    }
    .box3::before,.box3::after{
        content: '';
        width:20px;
        height:20px;
        position: absolute;
        left:50%;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-left:-10px;
    }
    .box3::before{
        top:-10px;
        background-color: #000;
        z-index: 1;
    }
    .box3::after{
        top:-9px;
        background-color: #fff;
        z-index: 2;
    }
    .box3 .content{
        width:100%;
        height:100%;
        position: relative;
        background-color: #42b983;
        border-radius: 10px;
        border: 1px solid #000;
        z-index: 3;
    }
    .box3 .content::before{
        content: '';
        width: 28px;
        height:1px;
        background-color:#42b983;
        position: absolute;
        top:-1px;
        left:50%;
        margin-left:-15px;
    }
</style>
<div class="example5">
    <div class="box3">
        <div class="content"></div>
    </div>
</div>

效果如下，但实现的不是很好

linear-gradient

通过背景渐变在显示效果上实现三角形( linear-gradient )

<div class="triangle"></div>
<style type="text/css">
.triangle{
	width:150px;
	height:150px;
	-webkit-background: linear-gradient(45deg, transparent 50%, red 50%, red 100%)
    background: linear-gradient(45deg, transparent 50%, red 50%, red 100%)
}
</style>

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

综上所述，如果需要css实现三角形的效果，最简单最少代码也最省心的是通过**border**来实现的