I code it

Code and Life

CSS中的before和after伪元素及其应用

before和after伪元素

所谓伪元素,可以理解为浏览器为某元素附加的元素(根据名字,附加在这个元素之前/之后)。用来完成特定的效果,before/after需要和content属性一起使用:

1
2
3
4
5
6
.css-class:before {
  content: " ";
}
.css-class:after {
  content: " ";
}

通过使用before/after伪元素,可以做一些很有意思的效果。这里有一些有意思的示例。

四个三角形

页面上经常会遇到小三角形这种视觉元素,比如表示一个可以打开/关闭的开关(将不会频繁使用的元素隐藏起来,点击可以展开/收起),或者一个模拟消息盒子(纯CSS实现),最早的做法是使用一个小的图片来完成,但是这个事实上可以通过纯CSS来实现。

原理是利用block元素的border属性,当border的值很小的时候,border之间的连接处并无异常,但是当border较大,而元素本身的尺寸小于border自身时,则每一个border都会呈现为梯形,而当元素的widthheight都为0时,就会看到一个正方形,而每个边都变成了一个三角形:

1
2
3
4
5
6
7
8
9
10
.container .color-box {
  content: " ";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: #00ff00;
  border-right-color: #000000;
  border-top-color: #ff0000;
  border-bottom-color: #0000ff;
}

image

小三角形

这时候,如果将其他的三条边隐藏起来(通过将border的颜色置为透明):

1
2
3
4
5
6
7
.container .color-box {
  content: " ";
  width: 0;
  height: 0;
  border: 10px solid transparent;//朝下的三角形
  border-top-color: #ff0000;
}

image

先将所有的边都设置为透明色,然后根据需要显示某一个边,来完成三角形的指向。

一个普通的消息框

一个普通的消息框,通过设置box-shadowborder-radius之后,可以变得比较“好看”,但是如果可以给这个消息框加上一个小的三角形(可以指向用户的头像等)。

HTML代码:

1
2
3
4
5
6
7
 <div class="container">
      <div class="chat-box">
          <p>
              Resque (pronounced like "rescue") is a Redis-backed library for creating background jobs, placing those jobs on multiple queues, and processing them later.
          </p>
      </div>
  </div>

样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container .chat-box {
  position: relative;
  border: 1px solid #6b6b6b;
  border-radius: 5px;
  box-shadow: 1px 1px 4px #6b6b6b;
  width: 300px;
}

.container .chat-box p {
  margin: 0;
  padding: 10px;
  font-size: 18px;
  font-family: "Microsoft Yahei";
}

image

更fancy的消息框

先通过before伪元素,在消息框的底部加上一个小的三角形:

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container .chat-box:after, 
.container .chat-box:before {
  position: absolute;
  content: " ";
  width: 0;
  height: 0;
  border: solid transparent;
  top: 100%;
  left: 62%;
} 

.container .chat-box:before {
  border-width: 10px;
  border-top-color: #6b6b6b;
  margin-left: -10px;
}

UPDATE:


1
2
3
4
5
.container .chat-box:after {
  border-width: 9px;
  border-top-color: white;
  margin-left: -9px;
}

但是一个实心的灰色三角形比较难看,我们需要再改进一下,即通过在这个伪元素之上,再绘制一个白色(与消息框颜色相同)的伪元素,但是尺寸又小一个单位(单位与消息框本身的尺寸相同,这里为1px)。

image

Comments