hugh 的个人博客

css实现箭头相关

1、首先看下css中border显示的特性

1)一般情况下,我们会给border设置同色,这时效果如下

《==【图1】

一直没有考虑过,这个border,浏览器是咋渲染的? 渲染的都是直线吗?

图2《==【图2】

咋一看,没错,就是直线,所以这时有人问,该怎么实现箭头,我总不能理解border的实现方式!ok,看下面

放大10倍==》

《==【图3】

突然发现了新大陆一般,原来是这样的!!。但是好像还无法实现箭头,因为border未连接的时候,显示效果如图2

2)transparent 透明属性隆重登场

将图3中的border-top改为透明

《==【图4】

发现神奇的三角出现了@~@

2、实现三角的案例

《==

 

☆使用伪类实现气泡框

<div class="c5"></div>

 

《==


标题:css实现箭头相关
作者:hugh0524
地址:https://blog.uproject.cn/articles/2016/06/30/1467274781632.html