这篇文章主要介绍“怎么用CSS绘制三角形箭头图案”,在日常操作中,相信很多人在怎么用CSS绘制三角形箭头图案问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用CSS绘制三角形箭头图案”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
CSS代码
CSS Code复制内容到剪贴板
/* 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 */
border-right: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points right */
div.arrow-rightright {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
border-left: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
绘制这些三角形的关键在于,你要让箭头所指方向的两个侧边有很粗的边框。而背向箭头方向的一边也是同样粗的边框,而这条边的颜色就是你的三角形的颜色。边框越粗,三角形越大。用这种方法你可以绘制出各种颜色、各种大小、各种朝向的箭头。最妙的是,你只需要几行CSS代码就能实现这种效果。
使用:before和:after绘制CSS三角形
上面的CSS例子使用的是真正的页面元素进行绘制,但有时候这个真正的元素还有它用,你不能走上面直接进行操作,这是怎么办?纯CSS的三角形其实还可以使用伪元素(pseudo-element)进行绘制。下面就是绘制方法:
CSS Code复制内容到剪贴板
div.tooltip {
/* tooltip content styling in here; nothing to do with arrows */
}
/* shared with before and after */
div.tooltip:before, div.tooltip:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent; /* arrow size */
}
/* these arrows will point up */
/* top-stacked, smaller arrow */
div.tooltip:before {
border-bottom-color: #fff; /* arrow color */
/* positioning */
position: absolute;
top: -19px;
left: 255px;
z-index: 2;
}
/* arrow which acts as a background shadow */
div.tooltip:after {
border-bottom-color: #333; /* arrow color */
/* positioning */
position: absolute;
top: -24px;
left: 255px;
z-index: 1;
}
背向箭头的那一侧的边框的颜色就是三角形箭头的颜色。画这个箭头并不需要同时使用:before和:after两个伪元素——一个就够了。而另外一个,你可以把它用作前一个的背景阴影或背景边。
到此,关于“怎么用CSS绘制三角形箭头图案”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。