前言

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

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

麻省理工大学的一位算法导论老师说过:

不要写上你不懂的代码(在写作业时)

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

解决方法

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

html

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

css

.triangle {
    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;
               上   右    下  左

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

其他

/* 向上 */
.up {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px;
    border-color: transparent transparent #000;
}
/* 向下 */
.down {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0;
    border-color: #000 transparent transparent;
}
/* 向左 */
.left {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 30px 0;
    border-color: transparent #000 transparent transparent;
}
/* 向右 */
.right {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 0 30px 30px;
    border-color: transparent transparent transparent #000;
}
分类: Web

发表评论

电子邮件地址不会被公开。 必填项已用*标注