css简单实现立体柱子案例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="height: 50px;"></d...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="height: 50px;"></div>
		<div class="zhuzi_content">
			<div class="top"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<style type="text/css">
			.zhuzi_content {
				position: relative;
				width: 100px;
				height: 600px;
				margin: 0 auto;
			}

			.top {
				width: 100px;
				height: 31px;
				background: rgba(102, 219, 234, 1);
				position: absolute;
				top: -30px;
				left: 0px;
				transform: rotate(45deg);
				transform: skew(299.5deg) rotate(18deg);
				z-index: 100;
			}

			.left {
				position: absolute;
				top: 0;
				left: 0;
				width: 41%;
				height: 100%;
				transform: skew(0deg,35deg);
				background-image:linear-gradient(180deg,rgba(102, 219, 234, 0.6)0%,rgba(102, 219, 234, 0.08)100%);
			}

			.right {
				position: absolute;
				top: 0;
				right: 0;
				width: 60%;
				height: 100%;
				transform: skew(0deg,-27deg);
				background-image:linear-gradient(180deg,rgba(102, 219, 234, 0.6)0%,rgba(102, 219, 234, 0.08)100%);
			}
		</style>
	</body>
</html>


效果:
attachments-2021-08-WQNAUYxn611926e373040.png

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. 央视新闻 0 文章