在使用bootstarp时,有很多图形,想问一下如何使用CSS绘制三角形?

收藏
CSS/CSS3
2
Mar 12, 2018

在使用bootstarp时,有很多图形,想问一下如何使用CSS绘制三角形?

回答

云松回答

问题分析:

css绘制三角形主要使用边框来控制,当我们把元素的宽度和高度都设定为0,只设定边框时,可以出现不同的图像。

以上图形都可以通过边框设定来实现。而你说的京东的那个下三角的图像,我们只需要在把最后一个图形通过css设定一个图形遮盖掉中间的部分就可以实现。

 

问题解答:


<style type="text/css">
	.ico{
		width: 0px;
		height: 20px;
		border:20px solid transparent;
		border-top: 20px solid #ccc;
		
		position: relative;
	}
	
	.ico:before{
		content: "";
		display: block;
		width: 0px;
		height: 0px;
		border: 18px solid transparent;
		border-top:18px solid #fff;
		position: absolute;
		left: -18px;
		top: -22px;
	}
	


</style>
<div class="ico"></div>

 

(0)

提交成功