CSS帶有三角形箭頭的矩形

admin發表於2019-01-21
CSS

本章節實現三角形效果並沒有考慮瀏覽器相容性問題，因為當前這種困擾越來越小。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
div{
  width:100px;
  height:100px;
  background:green;
  position:relative;
}
div:before /*div:after*/{
  content:"";
  position:absolute;
  top:40px;
  left:100px;
  width:0px;
  height:0px;
  border:10px solid transparent;
  border-left-color:green;
}
</style> 
</head>
<body>
<div></div>
</body>
</html>

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

一.實現原理:

[CSS] 純文字檢視 複製程式碼
div{
  width:100px;
  height:100px;
  background:green;
  position:relative;
}

將此div為相對定位，通過:before新增的div是絕對定位。

那麼這個絕對定位的元素就會以相對定位父div元素為定位參考物件。

[CSS] 純文字檢視 複製程式碼
div:before /*div:after*/{
  content:"";
  position:absolute;
  top:40px;
  left:100px;
  width:0px;
  height:0px;
  border:10px solid transparent;
  border-left-color:green;
}

通過:before選擇器為div元素新增一個偽元素，並將這個偽元素設定為絕對定位。

然後通過設定top和left屬性就將其位於div元素的外部左側的中部。

再設定偽元素的邊框，左側邊框為綠色，其他為透明，這樣就實現了三角形效果。

關於邊框為什麼會呈現三角形可以參閱css實現三角形效果詳解一章節。

二.相關閱讀

（1）.定位參閱css position 相對定位一章節。

（2）.:before參閱CSS before/E::before一章節。

相關文章