纯css和单class实现文件夹

使用before和after伪元素就可以了

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>纯css文件夹</title>
	<style type="text/css">
		body {
			margin: 0;	
		}

		div.folder {
			--folder-width: 120px;
			--folder-height: 30px;
			--folder-triangle-width: 30px;
			--folder-triangle-height: 30px;
			--folder-border-radius: 12px;
			--folder-bg: lightgoldenrodyellow;

			position: relative;
			width: 360px;
			height: 250px;
			margin: 80px auto 0;
			border-radius: 0 var(--folder-border-radius) var(--folder-border-radius) var(--folder-border-radius);
			background-color: var(--folder-bg);
		}
		.folder::before {
			position: absolute;
			top: calc(0px - var(--folder-height));
			left: 0;
			background-color: inherit;
			width: var(--folder-width);
			height: var(--folder-height);
			border-radius: var(--folder-border-radius) 0 0 0;
			content: '';
		}
		.folder::after {
			position: absolute;
			top: calc(0px - var(--folder-height));
			left: var(--folder-width);
			height: var(--folder-height);
			border-top: var(--folder-height) solid white;
			border-left: var(--folder-height) solid var(--folder-bg);
			background-color: inherit;
			content: '';
		}
	</style>
</head>
<body>
	<div class="folder"></div>
</body>
</html>

　　

posted @ 2023-04-18 16:38  Ccarrote  阅读(145)  评论(0)    收藏  举报