CSS_画三角形和梯形

-王二毛-

已于 2022-03-07 09:04:27 修改

阅读量137

点赞数

分类专栏： # css 文章标签： css

于 2021-05-24 07:16:58 首次发布

本文链接：https://blog.csdn.net/weixin_45084986/article/details/117212201

版权

css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。

设置一个盒子模型

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#sanjiaoxing {
				width: 40px;
				height: 40px;
				border-width: 40px;
				border-style: solid;
				border-color: red green blue brown;
			}
		</style>
	</head>

	<body>
		<div id="sanjiaoxing">

		</div>
	</body>

</html>

在这里插入图片描述

开始设置三角形

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#sanjiaoxing {
				width: 0px;/*将div的width和height设置为0*/
				height: 0px;
				border-width: 40px;
				border-style: solid;
				border-color: red transparent transparent transparent;/*使用transparent隐藏其他边*/
			}
		</style>
	</head>

	<body>
		<div id="sanjiaoxing">

		</div>
	</body>

</html>

在这里插入图片描述

开始设置梯形

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#tixing {
				width: 20px;
				height: 20px;
				border-width: 20px;
				border-style: solid;
				border-color: red transparent transparent transparent;
			}
		</style>
	</head>

	<body>
		<div id="tixing">

		</div>
	</body>

</html>

在这里插入图片描述

-王二毛-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_画三角形和梯形

我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。设置一个盒子模型<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #sanjiaoxing { width: 40px; height: 40px;
复制链接

扫一扫