实现CSS空心箭头代码实例

快乐打工仔 分类:实例代码

CSS空心箭头代码实例属于前端实例代码,有关更多实例代码大家可以查看

使用css可以实现实心箭头,也可以实现空心箭头。

关于实心箭头可以参阅利用border生成三角形箭头效果一章节。

下面就分享一个使用css3实现的空心箭头效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

CSS空心箭头代码实例,这样的场景在实际项目中还是用的比较多的,关于CSS空心箭头代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容