css实现三角形的6种方法

在一些面试经验中,经常能看到有关css的题目都会有一道如何使用css绘制三角形,而常见的回答通常也只有使用border进行绘制一种方法。

 

而css发展到今天,其实有很多有意思的仅仅使用css就能绘制出来的三角形的方式,本文将展示6中使用css绘制三角形的方式,而且它们都很好掌握。

当然本文是抛砖引玉,css日新月异,可能还有一些有意思的方法本文遗漏了,欢迎大家在留言区补充。



	
		
		实现三角形的6种方法
		
	
	
		

1. 使用border绘制三角形

2. 使用linear-gradient绘制三角形

3. 使用conic-gradient绘制三角形

4. transform:rotate配合overflow:hidden绘制三角形

5. 使用clip-path绘制三角形

6. 利用字符绘制三角形

效果图 如下

css实现三角形的6种方法_第1张图片

你可能感兴趣的:(css,css3,html)