CSS3制作三角TIP框

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS3制作三角TIP框

sofish在《CSS quiz: 带边 border 的三角形》制作介绍了使用border制作三角的兼容方案,很实用的一个东东。目前这种效果在Web中的运用是越来越多,有很多同学也想尽办法:有使用图片的,有使用border的,当然还有使用其他方法的。今天我要为大家介绍的是使用“::after”和"::before"配合border制作带边三角提示框,并为大家推荐一个在线制作工具。只不过这种方法不兼容IE8以及其以下的浏览器。如果要兼容IE,建议使用sofish的方法。

别的不多说,直接上代码:

demodownload

HTML Code

<div class="arrow_box top"></div>
<div class="arrow_box right"></div>
<div class="arrow_box bottom"></div>
<div class="arrow_box left"></div>

CSS Code

.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 1px solid #c2e1f5;
	padding: 10px;
	width: 200px;
	height: 100px;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	margin: 30px;
	float: left;
}
.arrow_box::after,
.arrow_box::bef
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/demo/395.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部