CSS空心箭頭程式碼例項

antzone發表於2018-07-17
CSS

使用css可以實現實心箭頭，也可以實現空心箭頭。

關於實心箭頭可以參閱利用border生成三角形箭頭效果一章節。

下面就分享一個使用css3實現的空心箭頭效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.arrow {
  width: 20px;
  height: 4px;
  margin: 0 auto 7px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #343c99;
  transform: rotate(45deg);
  transform-origin: left;
}
.arrow:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #343c99;
  position: absolute;
  right: -10px;
 top: -14px;
 transform: rotate(90deg);
 transform-origin: bottom;
}
</style>
</head>
<body>
  <div class="arrow"></div>
</body>
</html>

相關文章