css带有圆角尾巴箭头

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

分享一段代码实例,它实现了箭头效果。

并且箭头的尾部带有小尾巴,这也是比较常见的。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#ant{
  margin: 100px;
  border-radius: 100px 1px;
  border-top: 40px solid #f00;
  border-left: 0px solid #fff;
  width: 100px;
  height: 100px;
}
#ant::after{
  content: '';
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-left-color: #f00;
  margin: -70px 100px;
}
</style>
</head>
<body>        
<div id="ant"></div>
</body>
</html>

代码相对比较简单,更多内容可以参阅相关阅读。

相关阅读:

(1).border-radius可以参阅CSS3 border-radius一章节。

(2).content可以参阅css content一章节。

css带有圆角尾巴箭头,这样的场景在实际项目中还是用的比较多的,关于css带有圆角尾巴箭头就介绍到这了。

css带有圆角尾巴箭头属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容