css绘制三角形以及梯形

Posted 2022-04-29 老张在线敲代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css绘制三角形以及梯形相关的知识，希望对你有一定的参考价值。

等腰三角形

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 <style type="text/css">
 	#box
		width: 0;
		height: 0;
		border-top: 40px solid transparent;
		border-left: 40px solid transparent;
		border-right: 40px solid transparent;
		border-bottom: 40px solid red;
	
 </style>
<body>
	<div id="box">
		
	</div>
</body>
 
</html>

直角三角形

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 <style type="text/css">
 	#box
		width: 0px;
		height: 0;
		border-top: 0px solid transparent;
		border-left: 0px solid transparent;
		border-right: 100px solid transparent;
		border-bottom: 40px solid red;
		
	
 </style>
<body>
	<div id="box">
		
	</div>
</body>
 
</html>

梯形

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 <style type="text/css">
 	#box
		width: 50px;
		height: 0;
		border-top: 40px solid transparent;
		border-left: 40px solid transparent;
		border-right: 40px solid transparent;
		border-bottom: 40px solid red;
	
 </style>
<body>
	<div id="box">
		
	</div>
</body>
 
</html>

单边梯形

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 <style type="text/css">
 	#box
		width: 50px;
		height: 0;
		border-top: 40px solid transparent;
		border-left: 40px solid transparent;
		border-right: 40px solid transparent;
		border-bottom: 40px solid red;
	
 </style>
<body>
	<div id="box">
		
	</div>
</body>
 
</html>

以上是关于css绘制三角形以及梯形的主要内容，如果未能解决你的问题，请参考以下文章