css中使用盒子模型构造一个三角形

最新推荐文章于 2024-05-03 14:55:36 发布

YSJ_Dumpling

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量1.7k

点赞数 1

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

本文链接：https://blog.csdn.net/YSJ_Dumpling/article/details/103818376

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

相关知识点：

盒子模型：网页中所有的标签都是盒子模型

盒子模型组成部分：
1.内容区content：由宽高组成 width height
2.内边距（内填充）padding：内容到边框的距离
3.边框border：盒子的边框包裹住内容区和内边距
4.外边距margin：盒子边框距离其他盒子边框的距离，或者是距离浏览器边框的距离
在这里插入图片描述
分析一下：盒子模型有width,height,padding,border,margin属性，仅使用css样式去写出三角形，还需要一个transparent。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:0px;
				height:0px;
				/*border: 1px solid #000;*/
				border-left:100px solid red;
				border-right:100px solid transparent;
				border-top:100px solid transparent;
				border-bottom:100px solid transparent;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果如下图：
在这里插入图片描述

YSJ_Dumpling

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css中使用盒子模型构造一个三角形

相关知识点：盒子模型：网页中所有的标签都是盒子模型盒子模型组成部分：1.内容区content：由宽高组成 width height2.内边距（内填充）padding：内容到边框的距离3.边框border：盒子的边框包裹住内容区和内边距4.外边距margin：盒子边框距离其他盒子边框的距离，或者是距离浏览器边框的距离分析一下：盒子模型有width,height,padd...
复制链接

扫一扫