CSS矩形一側三角形箭頭效果

antzone發表於2017-11-06
CSS

下面這段程式碼例項，它實現了圓角帶有三角形的箭頭效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width: 200px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  border: 1px solid red;
  position: relative;
  border-radius: 3px;
}
div:before {
  content: "";
  position: absolute;
  right: -6px;
  top: 7px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
  transform: rotate(225deg);
}
</style>
</head>
<body>
<div>螞蟻部落歡迎您</div>
</body>
</html>

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

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
div {
  width: 200px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  border: 1px solid red;
  position: relative;
  border-radius: 3px;
}

設定矩形的寬度為200px，高度為40px。

文字居中顯示，字型大小為14px，紅色邊框

設定div為相對定位，作用會在後面介紹。

最後將矩形設定為圓角效果。

[CSS] 純文字檢視 複製程式碼
div:before {
  content: "";
  position: absolute;
  right: -6px;
  top: 7px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
  transform: rotate(225deg);
}

通過偽元素選擇器，在矩形div中建立一個小的div元素。

設定它為絕對定位，那麼它的位移參考物件就是它的父元素（因為父元素採用相對定位）。

下邊框和左邊框設定為紅色，這就是我們所看到的三角形，然後將其旋轉一定角度。

通過定位的方式將其放置於矩形的右側。

二.相關閱讀:

（1）.border-radius可以參閱CSS3 border-radius一章節。

（2）.transform: rotate()可以參閱transform: rotate()一章節。

（3）.絕對定位可以參閱CSS position:absolute 絕對定位一章節。

相關文章