用css、HTML绘制简单图形从简单图形到难;包括五角星、爱心、、三角形、正方形多种样式等。

本文链接：https://blog.csdn.net/mr_jianghanlin/article/details/105035298

用css、HTML绘制简单图形从简单图形到难

首先话不多说先看效果，如果用的上在详细看看如何实现

在这里插入图片描述

以上效果主要应用了一下属性： background:transparent;设置颜色颜色透明

border-radius；添加圆角边框

语法格式：border-radius: 1-4 length|% / 1-4 length|%;|

值	描述
length	定义圆角的形状。
%	以百分比定义圆角的形状。

transform 属性向元素应用 2D 或 3D 转换

语法格式：transform: none|transform-functions;

值	描述
none	不进行转换。
matrix(n,n,n,n,n,n)	2D 转换，使用六个值的矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	2D 转换
translate3d(x,y,z)	3D 转换。
translateX(x)	转换，只是用 X 轴的值
translateY(y)	只是用 Y 轴的值。
translateZ(z)	3D 转换，只是用 Z 轴的值。
scale(x,y)	2D 缩放转换。
scale3d(x,y,z)	3D 缩放转换。
scaleX(x)	设置 X 轴的值来定义缩放转换
scaleY(y)	设置 Y 轴的值来定义缩放转换。
scaleZ(z)	设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle)	3D 旋转。
rotateX(angle)	沿着 X 轴的 3D 旋转。
rotateY(angle)	沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	沿着 X 轴的 2D 倾斜转换。
skewY(angle)	沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

下面来看一下实现的代码：

首先是html的文件代码：


<!DOCTYPE html>
<html>
<head>
	<title>标色</title>
<link rel="stylesheet" type="text/css" href="sty.css">
</head>

<body>

		<div class="one"></div>
		<div class="two"></div>
		<div class="there"></div>
		<div class="four"></div>
		<div class="five"></div>
	<div class="sever-eight">
	    <div class="seven">
			<span class="seven_one"></span>
			<span class="seven_two"></span>
			<span class="seven_there"></span>
			<span class="seven_four"></span>
		</div>
		<div class="eight">
			<span class="eight_one"></span>
			<span class="eight_two"></span>
			<span class="eight_there"></span>
			<span class="eight_four"></span>
		</div>
	</div>
		<div class="nine"></div>
	<div>
		<div class="ten"></div>
    </div>
</body>
</html>

下面是css样式代码：

div{
		margin-top: 30px;
		display: inline-block;
		margin-left: 50px;
	}
	.one{
		width: 100px;
		height: 100px;
		background-color: green;
	}
	.two{
		width: 100px;
		height: 100px;
		background-color: #FF0000;
		border-radius: 50%;
	}

	.there{
		width: 30px;
		height: 30px;
		border:35px solid blue;
		border-radius: 50%;

	}
	.four{
		width: 0px;
		height: 0px;
		border-top: 50px solid yellow;
		border-right: 50px solid yellow ;
		border-left: 50px solid transparent;
		border-bottom:50px solid transparent;

	}
	.five{
		width: 0px;
		height: 0px;
		border-top: 50px solid #FF898F;
		border-right: 50px solid #93BAFF ;
		border-left: 50px solid #C89386;
		border-bottom:50px solid #FFB151;

	}
	.seven{
		width: 200px;
		height: 200px;
		display: flex;
		flex-wrap: wrap;

	
	}
	.seven_one{
		
		width: 0px;
		height: 0px;
		border-top: 50px solid #92D050 ;
		border-right: 50px solid #FFFF00;
		border-left:50px solid #92D050;
	    border-bottom:50px solid #FFFF00;
	}
.seven_two{
		
		width: 0px;
		height: 0px;
		border-top: 50px solid #FF0000 ;
		border-right: 50px solid #FF0000;
		border-left:50px solid #0070C0;
	    border-bottom:50px solid #0070C0;
	}
.seven_there{
		
		width: 0px;
		height: 0px;
		border-top: 50px solid #000000;
		border-right: 50px solid #000000;
		border-left:50px solid #7030A0;
	    border-bottom:50px solid #7030A0;
	}
.seven_four{
		
		width: 0px;
		height: 0px;
		border-top: 50px solid #FFFFFF;
		border-right: 50px solid #00B0F0;
		border-left:50px solid #FFFFFF;
	    border-bottom:50px solid #00B0F0;
	}
.eight{
		width: 200px;
		height: 200px;
		display: flex;
		flex-wrap: wrap;
		

}
.eight_one{
		
		width: 0px;
		height: 0px;
		border-top: 50px solid #FF0000 ;
		border-right: 50px solid#FF0000 ;
		border-left:50px solid #70AD47;
	    border-bottom:50px solid #70AD47;
	}

.eight_two{
		
		width: 0px;
		height: 0px;
		border-top: 50px solid #44546A;
		border-right: 50px solid #FFFF00;
		border-left:50px solid #44546A;
	    border-bottom:50px solid #FFFF00;
	}

.eight_there{
	    width: 0px;
		height: 0px;
		border-top: 50px solid#7030A0;
		border-right: 50px solid #002060;
		border-left:50px solid #7030A0;
	    border-bottom:50px solid #002060;
		}

.eight_four{
		
			
		width: 0px;
		height: 0px;
		border-top: 50px solid #FFC000;
		border-right: 50px solid #FFC000;
		border-left:50px solid #00B0F0;
	    border-bottom:50px solid #00B0F0;
	}
.sever-eight{
	  display: flex;
		flex-wrap: wrap;

}
.nine{
	margin-top: 100px;
	width: 0;
	height: 0;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   transform: rotate(-35deg);
   display: block;



}
.nine::after{
   width: 0;
   height: 0;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   position: absolute;
     transform: rotate(-70deg);
     content: "";
     left: -100px;
    

}
.nine::before{
	 width: 0;
   height: 0;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   position: absolute;
     transform: rotate(-145deg);
     content: "";
     left: -100px;
     top:8px;

}
.ten{
	  width: 0;
      height: 0;
     margin-top: 100px;
	   border: 100px solid red;
	   display: block;
	   position: absolute;
	   transform: rotate(45deg);

}
.ten::before{
	     width: 0;
        height: 0;
		border-radius: 50%;
		border: 100px solid red;
		position:absolute;
		top:-200px;
		left: -100px;
	    content: "";
}
.ten::after{
	     width: 0;
        height: 0;
		border-radius: 50%;
		border: 100px solid red;
		position:absolute;
		top:-100px;
		left: -200px;
	    content: "";
}