理解使用before,after偽類實現小三角形氣泡框

龍恩0707發表於2018-11-25

先來理解before和after偽類的用法吧,before從字面上的意思可以理解為前面的意思,它一般和content屬性一起使用,把內容插入在其他元素的前面,同理after的含義就是把內容插入到其他元素的後面了。先來看一個簡單的demo,如下程式碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css" id="colorFlipFlop">
  * {margin:0; padding: 0;}
  div {
    width: 200px;
    height: 100px;
    border: 1px solid red;
  }
  .after:after {
    content: '我是在後面的';
    color: blue;
  }
  .before:before {
    content: '我是在前面的';
    color: red;
  }
</style>
</head>
<body>    
  <div class="after">
    我是after內容
  </div>
  <div class="before">
    我是before內容
  </div>
</body>
</html>

效果如下:

簡單理解完 before 和 after後,我們來看看如何使用 before 和 after來製作小三角形吧。

1. 首先我們來看看 css border屬性,當我們把div中的border-color 設定成不同的顏色後,程式碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css" id="colorFlipFlop">
  * {margin:0; padding: 0;}
  .demo {
    width: 50px;
    height: 50px;
    border-width: 20px;
    border-style: solid;
    border-color: #CCC #00F #933 #0C9;
    margin: 100px;
  }
</style>
</head>
<body>    
  <div class="demo"></div>
</body>
</html>

效果如下圖:

如果我們現在把div的寬度和高度設定為0的話,那麼四邊就會變成三角形了,如下程式碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css" id="colorFlipFlop">
  * {margin:0; padding: 0;}
  .demo {
    width: 0px;
    height: 0px;
    border-width: 20px;
    border-style: solid;
    border-color: #CCC #00F #933 #0C9;
    margin: 100px;
  }
</style>
</head>
<body>    
  <div class="demo"></div>
</body>
</html>

效果變為如下:

應該可以理解掉吧,如上把寬度和高度設定為0的話,中間那個寬50px和高50px變為0,中間那塊就沒有了。

現在我們需要一個三角形,那麼我們現在只需要把其他三邊的顏色設定為透明就可以了,將其他三邊顏色設定為透明,即color的值為transparent. 如下程式碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css" id="colorFlipFlop">
  * {margin:0; padding: 0;}
  .demo {
    width: 0px;
    height: 0px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent #933 transparent;
    margin: 100px;
  }
</style>
</head>
<body>    
  <div class="demo"></div>
</body>
</html>

然後效果如下:

現在小三角形可以實現了,當然如果需要不同的方向的三角形可以設定對應不同的 border-color 位置對應的透明。

我們現在需要實現的是使用before和after這樣的偽類來實現氣泡框類似的效果。先看下一個簡單的demo,如下:

<div class="demo"></div>
<style>
  * {margin:0; padding: 0;}
  .demo {
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px solid #09f;
    margin: 100px;
  }
</style>

效果如下:

然後需要把小三角形定位上去即可。利用上面的介紹實現的小三角形的效果放在該元素的偽類上來。
我們需要在該div元素後面加一個小三角形,需要使用到偽類after,然後把偽類上的小三角定位上去即可,如下程式碼所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css" id="colorFlipFlop">
  * {margin:0; padding: 0;}
  .demo {
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px solid #09f;
    margin: 100px;
  }
  .demo:after {
    width: 0px;
    height: 0px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent #933 transparent;
    position: absolute;
    content: ' ';
    left: 39px;
    top: -24px;
  }
</style>
</head>
<body>    
  <div class="demo"></div>
</body>
</html>

如上程式碼,我們使用了偽元素after,把小三角定位上去,實現的效果變成如下了:

空心三角

現在效果基本實現了氣泡框的效果,但是呢上面的小三角是實心的,在很多應用場景中,小三角形是空心的,我們現在需要使用到另外一個偽類元素before。

空心三角的設計思路其實和實心的三角類似,使用的是before偽類,也是把小三角定位上去,但是before偽類設定的小三角可能沒有after設定小三角寬度大而已,並且before實現的小三角設定顏色為白色的實心三角,然後兩個小三角實現重疊一下,這樣的話,從視覺上看到的貌似是空心的三角了。如下程式碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css" id="colorFlipFlop">
  * {margin:0; padding: 0;}
  .demo {
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px solid #09f;
    margin: 100px;
  }
  .demo:after, .demo:before {
    width: 0px;
    height: 0px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    content: ' ';
    left: 39px;
    top: -24px;
  }
  .demo:before {
    top: -25px;
    border-color: transparent transparent #09f transparent;
  }
</style>
</head>
<body>    
  <div class="demo"></div>
</body>
</html>

如下圖所示:

相關文章