【CSS】画个三角形或圆形或环

news2024/11/15 8:32:42

首先通过调整边框，我们可以发现一些端倪

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box{
			width: 150px;
			height:150px;
			border: 50px solid black;
		}
	</style>
	<body>
		<div class="box"></div>
	</body>
</html>

接着我们通过调整各个边框（例如border-top）的属性后发现这些分割点棱角分明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box {
			width: 150px;
			height: 150px;
			border-top: 50px solid cyan;
			border-right: 50px solid red;
			border-bottom: 50px solid green;
			border-left: 50px solid gray;
		}
	</style>
	<body>
		<div class="box"></div>
	</body>
</html>

在把宽高都设为0后，发现这个图形逐渐清晰起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box {
			width: 0px;
			height: 0px;
			border-top: 50px solid cyan;
			border-right: 50px solid red;
			border-bottom: 50px solid green;
			border-left: 50px solid gray;
		}
	</style>
	<body>
		<div class="box"></div>
	</body>
</html>

把任意两个三角形颜色设为一样，剩下的透明后就能获得三角形了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box {
			width: 0px;
			height: 0px;
			border-top: 50px solid red;
			border-right: 50px solid red;
			border-bottom: 50px solid transparent;
			border-left: 50px solid transparent;
		}
	</style>
	<body>
		<div class="box"></div>
	</body>
</html>