纯CSS实现小箭头的方法

2016年5月23日 MK CSS 2 阅读 5272次

我们大多数的小箭头都是用小图片来做的，这里分享一款用纯CSS写的小箭头，大家可以看看，以后会放出更多的CSS小箭头来供大家参考。

代码预览

<div class="pre-wrap">
    <div class="pre">
        <div class="pre1"></div>
        <div class="pre2"></div>
    </div>
</div>
<style>
	.pre-wrap {
	width: 200px;
	height: 120px;
	margin: 50px auto 0;
	border: 2px solid #F00;
	border-radius: 4px;
	position: relative;
}
.pre {
	width: 80px;
	height: 80px;
	position: absolute;
	top: 20px;
	left: 40px;
}
.pre1 {
	border-width: 40px;
	border-color: transparent #F30 transparent transparent;
}
.pre2 {
	border-width: 40px;
	border-color: transparent #FFF transparent transparent;
	position: relative;
	top: -80px;
	left: 15px;
}
.pre1, .pre2 {
	/*****设置border-style:dashed;使ie6支持border透明*****/
	border-style: dashed solid dashed dashed;
    /*****设置容器宽高为0*****/
	width: 0;
	height: 0;
	/*****去掉ie6下默认高度，设置以下属性*****/
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
</style>

IIS提示.Net未注册的解决方法 Excel 已经检测到”XXX.xsl”是SYLK文件,但是不能将其加载的问题

相关文章

2 条评论 “纯CSS实现小箭头的方法”

бнанс рестраця для США说道：

2025年7月24日下午12:22

Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

回复
用纯CSS实现的箭头的各种方法 – 明凯博客说道：

2017年11月9日下午6:03

[…] 纯CSS实现小箭头的方法 […]

回复

发表回复取消回复