纯CSS绘制三角形箭头效果
5星 · 超过95%的资源 114 浏览量
2020-09-25
03:06:42
上传
评论
收藏 55KB PDF 举报 
纯纯CSS绘制三角形箭头效果绘制三角形箭头效果
最近我想修改一下这个网站，我想在上面放置一个提示框。这是很容易，但我想让提示框上有一个三角形的箭
头。可是，一想到这需要使用图片，并且各种颜色，各种方向的箭头要准备无数种，这几乎是一种灾难。幸运
的是，MooTools的核心开发着Darren Waddell告诉了我一个非常棒
使用纯CSS，你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头！
CSS代码代码
复制代码
代码如下:
/* create an arrow that points up */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* left arrow slant */
border-right: 5px solid transparent; /* right arrow slant */
border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points down */
div.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}
/* create an arrow that points left */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
- 1
- 2
前往页