CSS实现三角形小箭头

页面展示经常需要使用小箭头来指向一些内容,那么我们需要使用CSS+DIV进行设置。


实现思路:

  1. 先设置一个没有宽高的空div的边框实现。
  2. 小箭头可定义在文字块内,也可以定义在图片图内,放在当前的区块就要设置相对定位,然后小箭头设置绝对定位在合适的位置。

实现代码如下:

<!-- 向左的三角形 -->
<div class="triangle_border_left"></div>

<!--样式设置如下:(同理可制作向上、向下、向右的箭头)-->
<style>
 .triangle_border_left{
         width:0;height:0;
         border-width:20px 20px 20px 0;
         border-style:solid;
         border-color:transparent #07cbc9 transparent transparent;/*透明 浅蓝 透明 透明 */}
</style>

实现效果如下图: