[html5入门-13]html中利用border相关标签绘制三角形、菱形、梯形、圆形和圆环

本文主要跟大家分享一下如何在div标签中利用border相关属性实现页面显示三角形、菱形、梯形、圆形和圆环。

htmlBorderpadding在是独占有距离的,理解这一点,就容易实现以上图形了。

1.实现三角形

首先来看一下一个没有面积的div块包围它的边框是什么样的



	
		
		图形实现
		
	
	
		

[html5入门-13]html中利用border相关标签绘制三角形、菱形、梯形、圆形和圆环_第1张图片

可以看出div1周围的border均分成四块,那么我们只要把任何其他三条border设置为透明属性transparent,就可以使显示出任意方向的三角形:



	
		
		图形实现
		
	
	
		


[html5入门-13]html中利用border相关标签绘制三角形、菱形、梯形、圆形和圆环_第2张图片

2.实现菱形

菱形可以看作两个等腰三角形底边拼接在一块的,那么就可以把两个div块上下或左右挨在一块,把非接触的border透明掉即可:



	
		
		图形实现
		
	
	
		

[html5入门-13]html中利用border相关标签绘制三角形、菱形、梯形、圆形和圆环_第3张图片

3.实现梯形

梯形可以看作三角形的上顶点被一定宽度占据后形成的图形,那么只需把border包裹的div设置一定长度,把其他border设置为transparent即可实现:



	
		
		图形实现
		
	
	
		


[html5入门-13]html中利用border相关标签绘制三角形、菱形、梯形、圆形和圆环_第4张图片

4.实现圆形

圆形比较简单,把div块设置为正方形,然后把圆角border-radius设置为正方形变长的一半即可:



	
		
		图形实现
		
	
	
		

[html5入门-13]html中利用border相关标签绘制三角形、菱形、梯形、圆形和圆环_第5张图片

5.实现圆环

html中一般有两种方法,一种是利用borderdouble属性将border设置为双层边框,但是两个圆环宽度一样,无法控制单个圆环的宽度;另一种是利用两个带borderdiv嵌套实现,可以调整各个圆环宽度,缺点是需要将paddingborder所在的举例考虑在内。



	
		
		图形实现
		
	
	
		


设置父级div7border时需要考虑子级div71的宽度、子级div71上下边框、子级div71到父级div7的上下内边距、父级div7的边框宽度,总边距为=60px+10*2px+10*2px+10*2=120px,所以最外部的border-radius应为60px;设置子级div71的边框需要考虑子级的上下边框宽度,60px+10*2px=80px,所以子级的border-radius40px

以上代码效果如下图所示:

[html5入门-13]html中利用border相关标签绘制三角形、菱形、梯形、圆形和圆环_第6张图片


你可能感兴趣的:(HTML/CSS)