纯CSS实现三角形

前言

在慕课网前端基础入门2019版的步骤二·2-10作业题中，about区下部分文字区域有一个覆盖到图片区域的三角形图案。

课程中没有讲到，通过搜索后找到一下文章得以实现功能。

• 纯CSS写三角形-border法

麻省理工大学的以为算法导论老师说过：

不要写上你不懂的代码（在写作业时）

于是我要求自己能理解实现的原理

解决方法

加入我们需要创建一个箭头向左的三角形

html

<div class="triangle-left"></div>

css

.triangle-left {
    height: 0;
    width: 0;
    border-style: solid ;
    border-width: 30px 30px 30px 0;
    border-color: transparent red transparent transparent;
}               /* 透明       红   透明        透明 */

由于div是块级元素，占据一整行，所以可以添加上

display: inline-block;

原理

利用 border 转弯处的特性设置三条边等宽的 border 。

例如需要三角形箭头朝左就设置左边 border-width 为 0，其余为同等宽度。

border-width: 30px 30px 30px 0;
            /* 上  右   下   左*/

接着为某一边着色，其余为透明色。

其他

/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:0px;
    left:0px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 0;
    border-style:solid;
    border-color:#fc0 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:30px 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:28px 0 28px 28px;
    border-style:solid;
    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
    position:absolute;
    top:0px;
    left:0px;
}

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。