Question

如何使用背景制作Div图像从一侧看起来像六边形以下是我需要的一个例子：Demo

示例/ Demo中的标题从底部开始形成六边形

Answer 1

您可以使用一些CSS形状，例如尝试：

＆＃13;

#hexagon {
	width: 1000px;
	height: 550px;
	background:url(http://tresroyale.com/wp/wp-content/uploads/2013/08/1200x480.gif);
	position: relative;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom:0px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 500px solid red;
	border-right: 500px solid red;
	border-top: 100px solid transparent;
}

＆＃13;

 <div id="hexagon"></div>

＆＃13;

Answer 2

给下面一节六边形并添加这些样式

.hexagon::before, .hexagon::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 1670px solid #f7f5ed;
    top: -1669px;
    left: 50%;
    z-index: -10;
}

.hexagon::before {
    border-right: 10000px solid transparent;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.hexagon::after {
    border-left: 10000px solid transparent;
}

从它的一侧做一个Div作为Hexagon

2 个答案: