图:

CSS模拟小箭头

HTML代码:

<div class="pre-wrap">
    <div class="pre">
        <div class="pre1"></div>
        <div class="pre2"></div>
    </div>
</div>

 

CSS代码:

.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;

}

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-27
  • 2022-12-23
  • 2021-05-21
  • 2021-05-22
  • 2022-12-23
猜你喜欢
  • 2022-02-25
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-28
  • 2022-02-03
  • 2021-11-27
相关资源
相似解决方案