android 带箭头提示框,三种带箭头提示框总结实例

ca990383505196862543459a20ee64bc.png

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框。

1.通过border属性

思路:两个三角形,通过定位使两个三角形相差1px作为边框。

2.CSS3 transfrom

思路:先做一个两条边相同颜色的正方形,然后旋转一定角度就是三角形了

3.特殊字符'♦'

思路:特殊字符漏出上半部分,看上去就像三角形了

一、通过border属性:

我们先做一个宽和高都是10px的div,边框也是10px,

width: 10px;

height: 10px;

border: 10px solid;

border-color: red green yellow blue;

如下图:

f5744cb7b6d29ed695aceb95d629416c.png

图中间空白是我们设置的宽和高,如果设置为0px,会出现什么情况呢?,如下图:

e0d23d1efb40776aab95de7b20965d32.png

这时候我们就可以通过设置它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色,就出来我们想要的三角形了。如下图:

570228adb848b5eef74a7d27e3901dd4.png

现在我们来实

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值