css三角形的两种实现方法

三角形元素在网页中到处可见,对于三角形的实现方法也不同,有的可能直接用图片,但是很多情况下没有必要,那我们可能就会选择使用css来实现三角形。对于三角形的css实现,我所熟知的有两种:

1、使用三个透明的边和一个实体的边来实现一个三角形,代码如下:

.arrow{
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #f1f1f1;
}

这种实现有一定的缺陷,就是三角形是单一颜色的。

2、通过正方形旋转,然后调节位置控制部分隐藏来实现。

.arrow{
	width: 10px;
	height: 10px;
	border: 1px solid #f1f1f1;
	transform: rotate(-45deg);
}

这种方法相对较好,我一般用这种,可以做出三角和边线连接的效果。

一个demo显示这两种方法最本质的区别:http://demo.deanhan.cn/triangle

  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章