css实现六边形

1登峰造极

已于 2023-04-11 09:31:37 修改

阅读量2.9k

点赞数

于 2018-07-26 10:14:16 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/81215166

版权

html 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

拷贝的代码顺便记录一下
效果图如下
这里写图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS3 实现六边形图片展示效果</title>
		<style type="text/css">
			body,
			div,
			img,
			ul,
			li {
				margin: 0;
				padding: 0;
			}
			
			body {
				font-size: 12px;
				background-color: #DDD;
				min-width: 1200px;
			}
			
			ul,
			ul li {
				list-style: none;
			}
			
			.clear {
				clear: both;
			}
			
			.box {
				position: relative;
				width: 630px;
				margin: 100px auto;
			}
			
			.lineF,
			.lineS {
				position: absolute;
				visibility: hidden;
			}
			
			.lineS {
				top: 182px;
				left: 105px;
			}
			
			.boxF,
			.boxS,
			.boxT,
			.overlay {
				width: 200px;
				height: 250px;
				overflow: hidden;
			}
			
			.boxF,
			.boxS {
				visibility: hidden;
			}
			
			.boxF {
				transform: rotate(120deg);
				float: left;
				margin-left: 10px;
				-ms-transform: rotate(120deg);
				-moz-transform: rotate(120deg);
				-webkit-transform: rotate(120deg);
			}
			
			.boxS {
				transform: rotate(-60deg);
				-ms-transform: rotate(-60deg);
				-moz-transform: rotate(-60deg);
				-webkit-transform: rotate(-60deg);
			}
			
			.boxT {
				transform: rotate(-60deg);
				background: no-repeat 50% center;
				background-size: 125% auto;
				-ms-transform: rotate(-60deg);
				-moz-transform: rotate(-60deg);
				-webkit-transform: rotate(-60deg);
				visibility: visible;
			}
			
			.overlay {
				transition: all 250ms ease-in-out 0s;
				/* display: none; */
				position: relative;
				text-align: center;
				padding-top: 100px;
				height: 0px;
				color: white;
				bottom: -120px;
			}
			
			.overlay:hover {
				background-color: rgba(0, 0, 0, 0.6);
			}
			
			.boxT:hover .overlay {
				height: 300px;
				bottom: 0px;
				/* display: block; */
			}
			
			.overlay a {
				display: inline-block;
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -16px 0 0 -16px;
				border-radius: 3px;
				background-color: #d3b850;
				text-align: center;
				line-height: 32px;
				width: 32px;
				height: 32px;
				text-decoration: none;
				color: White;
				font-size: 18px;
				font-weight: bolder;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="lineF">
				<div class="boxF">
					<div class="boxS">
						<div class="boxT" style="background-image: url(img/1.jpg);">
							<div class="overlay">
								水电费水电费 是的发生的f第三方 水电费水电费水电费 是的fsd发 sd发 sdf sdfsd发sdfsd发sd 是的fsd发 是的fsd发sd发 sd发
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>

里面字体高度的调节请改变overlay 的 padding-top:值就行;

1登峰造极

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
css实现六边形

拷贝的代码顺便记录一下效果图如下 &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;CSS3 实现六边形图片展
复制链接

扫一扫