用css实现尖角

前些天在掘金上看到一篇介绍尖角的文章,很有意思,在此记录一下。

知乎评论框
云音乐评论框

如上图,评论或者回复的文本框都有个小尖角,实现方式有多种,下面介绍其中几种。
最简单的方法,使用border:

.bg {
    width: 0px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid grey;
    border-left: 10px solid transparent;
}

更高级的方法,使用两个小黑块,这是来自网易云的技巧:

<div>
            <span>
                <i class="bg">◆</i>
                <i class="bd">◆</i>
            </span>
</div>
div {
    position: relative;
}
i {
    position: absolute;
    font-style: normal;
}
.bg {
    color: black;
}
.bd {
    left: 1px;
    color: white;
}

具体原理:固定方块1,平移方块2,使得方块2左端距离方块1左端1px。
如图:


图1
图2

再将方块2颜色换成白色即可,最后会形成一个类似<的图案,就是我们想要的结果啦~

到这里一切看起来还都很简单,直到...

呃,上面这个图怎么实现呢?
具体原理是,用我们最开始介绍的方法,先实现一个黑色尖角,再用一个小一号的白色尖角覆盖它,也就是说,用大尖角包含小尖角,来去掉黑色,其中要用到伪元素的知识。

#demo {
    position: relative;
    width: 100px;
    height: 100px;
    background: #fff;
    border: 2px #000 solid;
}

#demo::before {
    position: absolute;
    left: 100%;
    width: 0px;
    height: 0px;
    content: "";
    top: 20px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid black;
}

#demo::after {
    position: absolute;
    left: 100%;
    width: 0px;
    height: 0px;
    content: "";
    top: 22px;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid white;
}

以上便是用css实现尖角的方法了,完~。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 153,653评论 23 674
  • 榜样是值得学习的一切人事物。 我们喜欢的很多人、事、物其中蕴含许多值得我们学习的品质。但这个前提在于我们要打开自己...
    Joyceloveslife阅读 39评论 0 0
  • 這是一份考核表,整理自『治療師的懺悔』一書 這本書探討的是「無效」的治療,所以裡面列了一些可能 會造成無效治療的狀...
    78度微学院阅读 104评论 0 0
  • 清晨八点钟的布达拉宫
    某迷阅读 108评论 1 1