纯css实现三角形

内容时效提醒

本文最后更新于 2016-05-14,距今已约 3824 天。这是一篇较早的文章,技术细节可能已经变化,请结合当前环境验证。

通过一个div伪元素绘制成 查看效果

<style>
#haotown{
  position: relative;
}
#haotown:after {
  border: 10px solid transparent;
  border-left: 10px solid #5CACEE;
  width: 0;
  height: 0;
  position: absolute;
  content: ' '
}
</style>

<div id="haotown"></div>