CSS 实现文本框三角箭头效果

在日常浏览网页的时候,我们经常可以看到有些文本框旁边有个三角箭头,做出聊天框的效果,那么这种效果应该如何用 CSS 代码实现呢,本文介绍一种简单的实现方法。

首先先看一下效果图,这是 Jekyll 文档中右侧目录框的箭头:

2017-09-14 15-26-40 的屏幕截图.png

一:如何实现三角箭头效果

可以利用 CSS 的 border 属性设置 div 的边框,首先思考如下代码:

div {
    width: 10px;
    height: 10px;
    border: 10px solid #000;
    border-left-color: #f00;
    border-right-color: #0f0;
    border-bottom-color: #00f;
}

以上代码效果:

2017-09-14 15-41-24 的屏幕截图.png

那么,如果这个 div 的 widthheight 为 0,会发生什么效果?

2017-09-14 17-27-51 的屏幕截图.png

到这里已经很明显了,所以,如果想获得单个的箭头,只需要修改其他三个方向的箭头的颜色就 ok 了。

div {
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
    border-right-color: #0f0;
}

以上代码效果:

2017-09-14 17-35-08 的屏幕截图.png

二、巧用 :before 伪类选择器把三角箭头添加到文本框

既然已经生成了三角箭头,接下来要做的就是把三角箭头添加到文本框。当然可以使用定位等方法完成,但是这样会添加无用的元素,所以,更好的方法是巧用 :before 伪类选择器。
:before 是 CSS 中的一个伪类选择器,关于其介绍可以参看 W3School 文档
具体做法是:

div {
    width: 100px;
    height: 50px;
    border: 2px solid #0f0;
    margin-left: 20px;
    border-radius: 5px;
}

div:before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
    border-right-color: #0f0;
    position: relative;
    top: 5px;
    left: -20px;
}

以上代码效果:

2017-09-14 17-52-21 的屏幕截图.png

标签: css

添加新评论