利用css制作图形

logical_thinking

于 2022-08-29 17:12:06 发布

阅读量226

点赞数 2

分类专栏： css基础盒知识文章标签： html5 前端 html 青少年编程 css

本文链接：https://blog.csdn.net/logical_thinking/article/details/126587961

版权

css基础盒知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文主要讲述了利用css制作三角形

在日常的学习过程中以及日常的工作过程中我们会遇到一些问题，例如我们需要写的盒子是各种形状的，有的需要我们自己写写出来的。

一、效果图

效果图如下：

话不多说上代码

二、css代码

实质上就是利用盒子的边框来展现图三角形

margin：0% auto；在浏览器页面中的显示效果是居中

transparent 是让其透明

为什么宽高要设置成0呢？这个问题写一下就知道了

	.wrapper{
				width: 0%;
				height: 0%;
				margin: 0% auto;
				border-top-width: 0px;
				border-left: 50px solid transparent;
				border-bottom: 50px solid transparent;
				border-right: 50px solid blue;
			}
			.first{
				width: 0%;
				height: 0%;
				margin: 0% auto;
				border-top: 50px solid transparent;
				border-left-width: 0px;
				border-bottom: 50px solid yellow;
				border-right: 50px solid  transparent;
			}
			
			.second{
				width: 0%;
				height: 0%;
				margin: 0% auto;
				border-top-width: 0px;
				border-left: 50px solid transparent;
				border-bottom: 50px solid green;
				border-right: 50px solid transparent;
			}
			.third{
				width: 0%;
				height: 0%;
				margin: 0% auto;
				border-top: 50px solid orangered;
				border-left: 50px solid transparent;
				border-bottom-width: 0px;
				border-right: 50px solid transparent;
			}
			.wrapper1{
				width: 0%;
				height: 0%;
				margin: 0% auto;
				border-top-width: 0px;
				border-left: 50px solid transparent;
				border-bottom: 50px solid transparent;
				border-right: 50px solid blue;
			}

从代码中可以看出，利用css制作三角形其实就是利用盒子的边框

想要什么样的三角形就让边框改变。

三、HTML

以下是简单的布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="wrapper"></div>
		<div class="first"></div>
		<div class="second"></div>
		<div class="third"></div>
	</body>
</html>