css底部帶有三角形箭頭的圓角矩形效果

admin發表於2017-04-07
CSS

分享一段程式碼例項，它實現了底部帶有三角形箭頭的圓角矩形效果。

比較常見於滑鼠懸浮的時候彈出的tip提示效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.antzone {
  margin: 200px;
  border: 1px solid black;
  width: 100px;
  height: 40px;
  position: relative;
  border-radius: 5px;
}
.antzone:before {
  border: 8px solid transparent;
  border-top-color: black;
  position: absolute;
  content: "";
  left: 50%;
  top: 100%;
  margin-left: -8px;
}
.antzone:after {
  border: 8px solid transparent;
  border-top-color: #FFFFFF;
  position: absolute;
  content: "";
  left: 50%;
  top: 100%;
  margin-left: -8px;
  margin-top: -1px;
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

[CSS] 純文字檢視 複製程式碼
.antzone {
  margin: 200px;
  border: 1px solid black;
  width: 100px;
  height: 40px;
  position: relative;
  border-radius: 5px;
}

設定矩形的相關樣式。

設定其邊框為黑色，長寬分別為100px和40px。

將其設定為相對定位，為了作為內部定位元素的定位參考物件。

最後將其設定為圓角。

[CSS] 純文字檢視 複製程式碼
.antzone:before {
  border: 8px solid transparent;
  border-top-color: black;
  position: absolute;
  content: "";
  left: 50%;
  top: 100%;
  margin-left: -8px;
}

通過偽元素選擇器:before在矩形元素中新增一個元素。

此元素的邊框厚度是8px，並且沒有設定元素的長寬，採用絕對定位的元素，如果不顯示設定其尺寸，那麼其尺寸為0。

通過四個邊框我們可以擠出四個三角形，具體可以參閱css實現三角形效果詳解一章節。

設定上邊框的顏色為黑色，這個會配合我們實現黑色三角形效果。

left: 50%和margin-left: -8px能夠使偽元素水平居中。

top: 100%將偽元素定位於矩形的底部外緣。

[CSS] 純文字檢視 複製程式碼
.antzone:after {
  border: 8px solid transparent;
  border-top-color: #FFFFFF;
  position: absolute;
  content: "";
  left: 50%;
  top: 100%;
  margin-left: -8px;
  margin-top: -1px;
}

這段程式碼和上一段程式碼的功能是一樣，不同無非是有兩點:

（1）.使用的:after偽物件選擇器，在這裡和:before沒什麼區別。

（2）.margin-top: -1px的作用是露出:before偽元素選擇器建立的元素的1px的黑色邊框。

相關文章