CSS绘制一个三角形

最新推荐文章于 2023-04-11 10:00:22 发布

前端吕小布

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量519

点赞数

分类专栏：笔记前端面试题 CSS 文章标签： html css 面试

本文链接：https://blog.csdn.net/weixin_43804496/article/details/112396901

版权

笔记同时被 3 个专栏收录

51 篇文章 1 订阅

订阅专栏

前端面试题

49 篇文章 23 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

我们先来看这样一个图形，为什么呢？因为绘制梯形、三角形或者平行四边形就是在这个基础上绘制的！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建三角形</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100px;
				height: 100px;
				
				border: 100px solid red;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

等腰梯形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建三角形</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100px;
				height: 100px;
				
				border: 100px solid;
				
				border-top-color: transparent;
				border-right-color: transparent;
				border-bottom-color: transparent;
				border-left-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

普通三角形（等腰三角形）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现三角形</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 0px;
				height: 0px;
				
				border: 100px solid;
				
				border-top-color: red;
				border-right-color: transparent;
				border-bottom-color: transparent;
				border-left-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

等边三角形

我们知道等边三角形，高是边长的一半的sqrt(3)倍，所以如果边长的一半为50的话，高度差不多就是86.6，又因为边长的一半就是左边框的厚度，高度就是上边框的厚度，所以等边三角形的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建三角形</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 0px;
				height: 0px;
				
				border-top: 86.6px solid;
				border-left: 50px solid;
				border-right: 50px solid;
				
				border-top-color: red;
				border-right-color: transparent;
				border-bottom-color: transparent;
				border-left-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

平行四边形

解题思路：由创建三角形我们得知这是上边框和右边框，一个平行四边形是不是只要再拿它的中心对称图形就可以了？所以平行四边形的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建平行四边形</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 0px;
				height: 0px;
				
				float: left;
				
				border: 100px solid;
				
				border-top-color: red;
				border-right-color: red;
				border-bottom-color: transparent;
				border-left-color: transparent;
			}
			.box2{
				width: 0px;
				height: 0px;
				
				float: left;
				
				border: 100px solid;
				
				border-top-color: transparent;
				border-right-color: transparent;
				border-bottom-color: red;
				border-left-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

绘制什么直角梯形之类的，是不是一个道理？

前端吕小布

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS绘制一个三角形

目录等腰梯形普通三角形（等腰三角形）等边三角形平行四边形我们先来看这样一个图形，为什么呢？因为绘制梯形、三角形或者平行四边形就是在这个基础上绘制的！<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>创建三角形</title> <style> *{ margin: 0; padding: 0;
复制链接

扫一扫