html - 在定制布局中,html如何连接CSS六边形元素?

  显示原文与译文双语对照的内容
69 5

这是我要实现的布局:

我已经用这个css创建了六边形:

.hexagon {
 width: 100px;
 height: 55px;
 background: red;
 position: relative;
 display:inline-block;
 margin:0.2em;
}
.hexagon:before {
 content:"";
 position: absolute;
 top: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 25px solid red;
}
.hexagon:after {
 content:"";
 position: absolute;
 bottom: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 25px solid red;
}

但是我想知道如何用图像填充它们。这里有一支钢笔:https://codepen.io/1istbesser/pen/ddypXK

如何将图像 inside 放置在六边形上以便它覆盖所有的图像?如果我在 #hexagon1, 上使用 background-image,图像只覆盖中间部分。

时间:原作者:0个回答

83 5

你要运行的问题是,使用CSS三角形创建六角形实际上会产生一个或者两个边框。这有两种效果:

  • 你不能轻松将图像放入填充边框,以便将它的剪切。
  • 你不能制作六边形- 并且只有六边形- 可以单击:整组矩形总是可以单击的,这将使你的布局复杂,它们的重叠。

你将需要一些能产生实际六边形的东西。具有剪辑路径的inline SVG是一个很好的配置- 与CSS中的clip-path 不同,在SVG中支持。下面是一个示例:

<svg class="svg-graphic" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
 <defs>
 <clipPath id="hexagonal-mask">
 <polygon points="300,150 225,280 75,280 0,150 75,20 225,20"/>
 </clipPath>
 </defs> 
 <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png" preserveAspectRatio="xMidYMin slice"/>
</svg>

下面是一个更详细的例子显示可以点击的六角形,并使用剪辑路径定义:

.svg-template {
 position: absolute;
}
.honeycomb {
 list-style: none;
 margin: 0;
 padding: 0;
 position: relative;
 width: 1200px;
 height: 1200px;
 border: 1px solid #DDD;
}
.honeycomb li {
 margin: 0;
 padding: 0;
 position: absolute;
}
.honeycomb li:nth-child(1) {
 top: 0;
 left: 0;
}
.honeycomb li:nth-child(2) {
 top: 0;
 left: 290px;
}
.honeycomb li:nth-child(3) {
 top: 0;
 left: 580px;
}
.honeycomb li:nth-child(4) {
 top: 240px;
 left: 145px;
}
.honeycomb li:nth-child(5) {
 top: 240px;
 left: 435px;
}
.honeycomb li:nth-child(6) {
 top: 240px;
 left: 725px;
}
.honeycomb li a {
 cursor: pointer;
}
.honeycomb li a:hover image{
 opacity: 0.5;
}
<svg class="svg-template" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
 <defs>
 <clipPath id="hexagonal-mask">
 <polygon points="50 0, 95 25, 95 75, 50 100, 5 75, 5 25"/>
 </clipPath>
 </defs>
</svg>
<ul class="honeycomb">
 <li>
 <svg width="300" height="300" viewBox="0 0 100 100"> 
 <a href="#something">
 <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
 </a>
 </svg>
 </li>
 <li>
 <svg width="300" height="300" viewBox="0 0 100 100"> 
 <a href="#something">
 <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
 </a>
 </svg>
 </li>
 <li>
 <svg width="300" height="300" viewBox="0 0 100 100"> 
 <a href="#something">
 <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
 </a>
 </svg>
 </li>
 <li>
 <svg width="300" height="300" viewBox="0 0 100 100"> 
 <a href="#something">
 <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
 </a>
 </svg>
 </li>
 <li>
 <svg width="300" height="300" viewBox="0 0 100 100"> 
 <a href="#something">
 <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
 </a>
 </svg>
 </li>
 <li>
 <svg width="300" height="300" viewBox="0 0 100 100"> 
 <a href="#something">
 <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
 </a>
 </svg>
 </li>
</ul>
原作者:
50 1

如果你想使用图像作为 background,则需要考虑另一种方法。你依赖伪元素,因此hexagone不需要为一个元素 ,因此你不能使用 background 图像覆盖整个区域。

下面是使用 clip-path的一个想法:

* {
 background-color: black;
}
section {
 margin-top: 3em;
 display: flex;
 flex-flow: column;
 align-items: center;
}
.hexagon {
 width: 100px;
 height: 100px;
 background: url(https://lorempixel.com/100/100/) 0 0/cover no-repeat;
 position: relative;
 display: inline-block;
 margin: -10px 0.2em;
 -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
<section>
 <div class="row">
 <div class="hexagon" id="hexagon1"></div>
 <div class="hexagon" id="hexagon2"></div>
 <div class="hexagon" id="hexagon3"></div>
 <div class="hexagon" id="hexagon4"></div>
 </div>
 <div class="row">
 <div class="hexagon" id="hexagon5"></div>
 <div class="hexagon" id="hexagon6"></div>
 <div class="hexagon" id="hexagon7"></div>
 <div class="hexagon" id="hexagon8"></div>
 <div class="hexagon" id="hexagon9"></div>
 </div>
</section>
原作者:
119 0

你可以做的是绘制一个 SVG,而不是将图像作为 mask 放在css中

https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

*{
 background-color:black;
}
section{
 margin-top:3em;
 display:flex;
 flex-flow: column;
 align-items: center;
}
.hexagon {
 width: 100px;
 height: 110px;
 background: red;
 position: relative;
 display:inline-block;
 margin:0.2em;
 -webkit-mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
 mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
 background-image: url('https://img1.ibxk.com.br/2017/07/13/13160112901226.jpg?w=700');
 background-size: cover;
 background-position: center;
}
.row{
 text-align: center;
 margin-top: -25px
}
<section>
 <div class="row">
 <div class="hexagon" id="hexagon1"></div>
 <div class="hexagon" id="hexagon2"></div>
 <div class="hexagon" id="hexagon3"></div>
 <div class="hexagon" id="hexagon4"></div>
 <div class="row">
 <div class="hexagon" id="hexagon5"></div>
 <div class="hexagon" id="hexagon6"></div>
 <div class="hexagon" id="hexagon7"></div>
 </div>
 <div class="row">
 <div class="hexagon" id="hexagon8"></div>
 <div class="hexagon" id="hexagon9"></div>
 </div>
 </section>
原作者:
115 2

我把这段代码

Codepen

我改变了你绘制元素的方式,改为添加边框红色,我添加了带有红色的边,但是你需要知道页面的background-color,但是你需要知道页面的,前后的图像

CSS

*{
 background-color:black;
}
section{
 margin-top:3em;
 display:flex;
 flex-flow: column;
 align-items: center;
}
.hexagon {
 width: 100px;
 height: 110px;
 background: red;
 position: relative;
 display:inline-block;
 margin:0.2em;
 overflow: hidden;
}
.hexagon img{
 position: absolute;
 left: 50%;
 top: 50%;
 min-width: 100%;
 min-height: 100%;
 height: 100%;
 transform: translate(-50%, -50%);
 z-index: 1;
}
.hexagon:before {
 content:"";
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 0;
 border-right: 50px solid black;
 border-left: 50px solid black;
 border-bottom: 25px solid transparent;
 z-index: 2;
}
.hexagon:after {
 content:"";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 0;
 border-right: 50px solid black;
 border-left: 50px solid black;
 border-top: 25px solid transparent;
 z-index: 2;
}
.row{
margin-top:1.3em;
}
.hexagon#hexagon2{
 background-color: purple;
}
.hexagon#hexagon2:before{
 border-bottom-color: purple;
}
.hexagon#hexagon2:after{
 border-top-color: purple;
}
.hexagon#hexagon3{
 background-color: white;
}
.hexagon#hexagon3:before{
 border-bottom-color: white;
}
.hexagon#hexagon3:after{
 border-top-color: white;
}
.hexagon#hexagon4{
 background-color: orange;
}
.hexagon#hexagon4:before{
 border-bottom-color: orange;
}
.hexagon#hexagon4:after{
 border-top-color: orange;
}
原作者:
...