css实现不规则图形

在前端开发中,经常会遇到一些不规则图形,或用作背景,或当做图标,有些小伙伴喜欢切成图片,这当然可以实现。但有时用图片会比较麻烦,就不如代码实现。最简单的用css其实可以实现很多不规则的图形。无聊的时候整理了一些图形的写法,仅供参考,欢迎指教!

1、先从三角形开始。有很多图形都是拼接起来的,而三角形在其中扮演着重要的角色:

直角三角形:

.sj2{
	width: 0;
	border-top: 200px solid #09c;
	border-right: 200px solid transparent;
}

<div class="sj2"></div>

实现效果:

下三角,用到下三角的情况比较多,例如对话框下的小三角,以下是实现代码:

.sj1{
	width: 0;
	border-top: 200px solid #09c;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
}
<div class="sj1"></div>

实现效果:

左三角:

.left_tri{
	width: 0;
	border-right: 100px solid #FF99CC;
	border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
}
<div class="left_tri"></div>

效果如图:

右三角:

.ri_tri{
	width: 0;
	border-left: 100px solid #FF99CC;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}
<div class="ri_tri"></div>

效果如图:

关于三角形总结:

开发过程中可能会遇到各种各样的三角形,正三角,直角,各种角度的三角等等,其实明白其中的原理很轻松就能够写出各种三角形了。开发过程中可能会遇到各种各样的三角形,正三角,直角,各种角度的三角等等,其实明白其中的原理很轻松就能够写出各种三角形了。 如果尖在上,就设置border-bottom,border-left,border-right就可以,border的宽度就根据需要的角度来设置就可以了;  如果尖在下,就设置border-top,border-left,border-right,同样,border的宽度根据需要的角度来调整;  尖在左边,就设置border-right,border-top和border-bottom,border的宽度根据需要的角度来调整;  尖在右边,就设置border-left,border-top和border-bottom,border的宽度根据需要的角度来调整。  实现三角形的前提是,容器的宽度要设置为0,高度不需要设置。

2、不规则对话框。这个图形就是一个三角形,一个矩形,两个不规则的矩形和一个不规则的三角形拼接起来的。如果想要实现不定字数的对话框可以使用这个图形,不多说,上代码:

<style>
.bar {
	 width:200px; height:20px;
         background-color: red;
}
.box{
	 width:100px; height:20px;
	 display:table-cell;
}
		
.b1{
	 border-radius: 0 0 50%/20px 0;
         background-color: white;
}
		
.b2{
	 border-radius: 0 0 0 50%/20px;
	 background-color: white;
}
		
.b3{
	 border-radius: 50% 0 0 0;
	 background-color:red;
}
		
.b4{
	 border-radius: 0 50% 0 0;
	 background-color: red;
}
		
.box5{
	width:200px; height:100px;
	background-color: red;
}
</style>
<!--不规则对话框-->
<div class="bar">
  	<div class="box b1"></div><div class="box b2"></div>
</div>
<div>
	 <div class="box b3"></div><div class="box b4"></div>
</div>
<div class="box5"></div>

效果图如下:

规则对话框:

/*对话框*/
.dialog{
	position: relative;
	width: 200px;
	height: 200px;
}
.dialog_rect{
	position: absolute;
	width: 150px;
	height: 80px;
	background: #0099CC;
	border-radius: 10px;
}
.dialog_tri{
	position: absolute;
	bottom: 80px;
	left: 25px;
	width: 0;
	border-top: 20px solid #0099CC;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
/*对话框是由一个矩形和一个三角形组成*/
<!--对话框-->
<div class="dialog">
	<div class="dialog_rect"></div>
	<div class="dialog_tri"></div>
</div>

效果图:

3、椭圆:

/*椭圆1*/
.oval{
	width: 100px;
	height: 50px;
	background: #66CCCC;
	border-radius: 50px/25px;
}
<!--椭圆-->
<div class="oval"></div>

效果图:

4、梯形:

.laddershape{
	width: 100px;
	border-bottom: 100px solid #CCFF66;
	border-left: 50px solid transparent;
			border-right: 50px solid transparent;
}
<!--梯形-->
<div class="laddershape"></div>

效果如图:

5、六边形:

/*六边形*/
.hexagon{	
	position: relative;	
	width: 200px;
	height: 240px;
}
.he_trit{
	position: absolute;
	width: 0;
	border-bottom: 50px solid #CCFF66;
	border-left: 86.6025px solid transparent;
	border-right: 86.6025px solid transparent;
}
.he_rect{
	position: absolute;
	top: 50px;
	width: 173.205px;
	height: 100px;
	background: #CCFF66;
}
.he_trib{
	position: absolute;
	top: 150px;
	width: 0;
	border-top: 50px solid #CCFF66;
	border-left: 86.6025px solid transparent;
	border-right: 86.6025px solid transparent;
}
<!--六边形-->
<div class="hexagon">
	<div class="he_trit"></div>
	<div class="he_rect"></div>
	<div class="he_trib"></div>
</div>

效果如图:

 

6、不规则矩形:

.irr_rect{
	width: 100px;
	height: 100px;
	background: #CCFF66;
	border-radius: 10px 20px 30px 40px/40px 15px 10px;
}
<!--不规则矩形-->
<div class="irr_rect"></div>

效果如图:

关于不规则矩形总结:

border-radius按照顺时针方向设置值,语法为border-radius: 1-4 length|% / 1-4 length|%;我理解为前为top和bottom,后为left和right,border-radius按照顺时针方向设置值,语法为border-radius: 1-4 length|% / 1-4 length|%;我理解为前为top和bottom,后为left和right, 分别为border-top-left,border-top-right,border-bottom-right,border-bottom-left,若省略border-bottom-left,则与border-top-right相同; 若省略border-bottom-right,则与border-top-left相同,若省略border-top-right,则与border-top-left相同;border-radius的值可以设置为数值+单位, 也可以设置为百分比。

其实再复杂的图形都是有规律可循的,本文只是列举了几种比较简单的不规则图形,更多图形请参考:

https://github.com/Lmushroom/css-irregular-figure.git