css实现各种形状

最新推荐文章于 2024-04-23 14:33:07 发布

vousmevoyez0613

最新推荐文章于 2024-04-23 14:33:07 发布

阅读量210

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/acm_cn1234567890/article/details/107712171

版权

前端专栏收录该内容

48 篇文章 2 订阅

订阅专栏

正方形 / 长方形

正方形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.square {
			    width: 120px;
			    height: 120px;
			    background-color: #0000FF;
			} 
		</style>
		   
	</head>
	<body>
		<div class="square"></div>   
	</body>
</html>

圆形

要使用CSS来制作一个圆形，我们需要一个div，设class为circle。
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.circle {
			    width: 120px;
			    height: 120px;
			    background: blue;
			    border-radius: 60px;
			} 
		</style>   
	</head>
	<body>
		<div class="circle"></div>   
	</body>
</html>

椭圆

设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.oval {
			    width: 200px;
				height: 100px;
				background: blue;
				border-radius: 100px / 50px;
			} 
		</style>
		   
	</head>
	<body>
		<div class="oval"></div>   
	</body>
</html>

纯css 实现三角形、梯形等效果

三角形 / 倒三角 / 左三角 / 右三角

要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。

/*正三角*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#triangle {
			    width: 0;
			    height: 0;
			    border-bottom: 100px solid #fcf921;
			    border-left: 50px solid transparent;
			    border-right: 50px solid transparent;
			} 
		</style>
		   
	</head>
	<body>
		<div id="triangle"></div>  
	</body>
</html>

倒三角

/*倒三角*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#triangle {
			    width: 0;
			    height: 0;
			    border-top: 100px solid #fcf921;
			    border-left: 50px solid transparent;
			    border-right: 50px solid transparent;
			} 
		</style>
		   
	</head>
	<body>
		<div id="triangle"></div>  
	</body>
</html>

左三角

/*左三角*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#triangle {
			    width: 0;
			    height: 0;
			    border-top: 70px solid transparent;
			    border-left: 140px solid #6bbf20;
			    border-bottom: 70px solid transparent;
			} 
		</style>
		   
	</head>
	<body>
		<div id="triangle"></div>  
	</body>
</html>

右三角

/*右三角*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#triangle {
			    width: 0;
			    height: 0;
			    border-top: 70px solid transparent;
			    border-right: 140px solid #6bbf20;
			    border-bottom: 70px solid transparent;
			} 
		</style>
		   
	</head>
	<body>
		<div id="triangle"></div>  
	</body>
</html>

菱形

两个三角形拼起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#triangle1 {
			    width: 0;
			    height: 0;
			    border-bottom: 100px solid #fcf921;
			    border-left: 50px solid transparent;
			    border-right: 50px solid transparent;
			} 
			#triangle2 {
			    width: 0;
			    height: 0;
			    border-top: 100px solid #fcf921;
			    border-left: 50px solid transparent;
			    border-right: 50px solid transparent;
			} 
		</style>
		   
	</head>
	<body>
		<div id="triangle1"></div>  
		<div id="triangle2"></div>
	</body>
</html>

梯形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#trapezium {
			    width:50px;
	            height:50px;
	            
	            border-right:50px solid transparent;
	            border-bottom:50px solid green;
	            border-left:50px solid transparent;
	            
			}  
		</style>
		   
	</head>
	<body>
		<div id="trapezium"></div>  
	</body>
</html>

心形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#heart {
			    position: relative;
			}
			  
			#heart:before,#heart:after {
			    content: "";
			    width: 70px;
			    height: 115px;
			    position: absolute;
			    background: red;
			    left: 70px;
			    top: 0;
			    border-radius: 50px 50px 0 0;
			    transform: rotate(-45deg);
			    transform-origin: 0 100%;
			}
			  
			#heart:after {
			    left: 0;
			    transform: rotate(45deg);
			    transform-origin: 100% 100%;
			}                              
		</style>
		   
	</head>
	<body>
		<div id="heart"></div>  
	</body>
</html>

吃豆人

吃豆人·

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		.box
        {
            width:0px;
            height:0px;

            border-top:50px solid yellow;
            border-right:50px solid transparent;
            border-bottom:50px solid yellow;
            border-left:50px solid yellow;
            border-radius: 50px;
        }                          
		</style>
		   
	</head>
	<body>
		<div class="box"></div>  
	</body>
</html>

vousmevoyez0613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现各种形状

正方形 / 长方形<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .square { width: 120px; height: 120px; background-color: #0000FF; } </style>
复制链接

扫一扫

专栏目录