css绘制三角形以及梯形

最新推荐文章于 2024-02-21 20:49:08 发布

码上流星&洒下星辰

最新推荐文章于 2024-02-21 20:49:08 发布

阅读量516

点赞数 1

分类专栏： html，css面试题文章标签： css绘制三角形和梯形

张砚博

本文链接：https://blog.csdn.net/qq_47272950/article/details/124465279

版权

html，css面试题专栏收录该内容

12 篇文章 0 订阅

订阅专栏

等腰三角形

<!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>

码上流星&洒下星辰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
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;
复制链接

扫一扫