css 三角箭头

最新推荐文章于 2024-05-27 23:57:48 发布

最新推荐文章于 2024-05-27 23:57:48 发布 · 255 阅读

文章标签：

#css arrow #css三角箭头

web 专栏收录该内容

9 篇文章

订阅专栏

要做效果：天猫首页分类导航白色小三角

[img]http://dl2.iteye.com/upload/attachment/0096/6078/cc50fae2-390b-3602-99c3-4fb2f53736d8.jpg[/img]

主要用css设置border的样式

首先看一下，一个普通的设置border情况

<html>
 <head>
  <title>test </title>
  <style type="text/css">
	 .arrow {
		width:50px;
		height:50px;
		border-style: solid;
		border-color: red green red green;
		border-width: 60px 60px 60px 60px;
	}
  </style>
 </head>
 <body>
	<div class="arrow"></div>
 </body>
</html>

效果图

[img]http://dl2.iteye.com/upload/attachment/0096/6080/7c84e0cc-2c22-32d5-b64e-be66b89f25c7.jpg[/img]

当把上面的样式width和height改为0时

[img]http://dl2.iteye.com/upload/attachment/0096/6082/2745ac49-c793-3a75-a869-1d3e1c3fc592.jpg[/img]

然后在把左边border的宽度该为0

[img]http://dl2.iteye.com/upload/attachment/0096/6084/8a7a92ef-501f-33a7-89db-dc484c6499a3.jpg[/img]

最后把右边border颜色改为白色

[img]http://dl2.iteye.com/upload/attachment/0096/6086/4ab2e5ff-d1c6-3c13-b536-a1c3d0626c93.jpg[/img]

白色的三角基本上就出来了。最后再包一层div，底色和三角的上下border颜色一样，
最后样式代码

<html>
 <head>
  <title>test </title>
  <style type="text/css">
	 .arrow {
		position:absolute;
		top:30px;
	    right:0px;
		width:0px;
		height:0px;
		border-style: solid;
		border-color: red white;
		border-width: 60px 60px 60px 0px;
	}
	.base{
		position:absolute;
		width:350px;
		height:180px;
		background-color:red;
	}
  </style>
 </head>
 <body>
	<div class="base">
		<div class="arrow"></div>
	</div>	
 </body>
</html>

效果：

[img]http://dl2.iteye.com/upload/attachment/0096/6095/dbb7e4e0-d544-387d-9d48-75ae19bedec9.jpg[/img]

对于一个div，当width和heigth都设置为0时，这是
若border不为0，则不为0的border就会相交于一点，
每一个border方向上就会形成一个三角形。只留一边
与父元素底色不同，就会呈现三角形效果。