- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
.hexagon-gallery {
margin: auto;
margin-top: 50px;
max-width: 1000px;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 200px;
padding-bottom: 50px;
}
.hex {
display: flex;
position: relative;
width: 240px;
height: 265px;
background-color: #424242;
-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%);
}
.hex:first-child {
grid-row-start: 1;
grid-column: 3 / span 2;
}
.hex:nth-child(2) {
grid-row-start: 1;
grid-column: 4 / span 2;
}
.hex:nth-child(3) {
grid-row-start: 1;
grid-column: 6 / span 2;
}
<section class="hexagon-gallery">
<div class="hex"><img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&dl=aerial-aerial-photo-aerial-photography-1421264.jpg&fm=jpg" alt="some"></div>
<div class="hex"></div>
<div class="hex"></div>
</section>
我试图瞄准类似形状的东西。六边形拉伸(stretch)拼写错误形状,如果有任何其他更简单的方法可以做到这一点,我想知道。也许两边形状的矩形都可以,我不确定。
最佳答案
那行得通吗?我整理了一些代码以删除无关的 CSS 属性。
主要部分是:
clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%, 15% 0%);
得到正确的形状。grid-auto-flow: column;
和 grid-auto-columns: 168px;
(这是你的 .hex
宽度 -30 %,因为形状在每边切割 15%)以正确对齐元素。`z-index
应按递减顺序排列,以便每个元素始终覆盖下一个元素。如果你删除 z-index
你会产生相反的效果(每个元素被下一个元素覆盖),默认情况下在 HTML 中,位于其兄弟组底部的元素出现在“上方” "它上面的元素。grid-auto-rows: 0px;
替换每个元素上的 grid-row-start: 1;
。.hexagon-gallery {
display: grid;
grid-auto-rows: 0px;
grid-auto-columns: 168px;
grid-auto-flow: column;
}
.hex {
display: flex;
width: 240px;
height: 265px;
clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%, 15% 0%);
}
.hex:first-child {
background: red;
z-index: 1000;
}
.hex:nth-child(2) {
background: green;
z-index: 900;
}
.hex:nth-child(3) {
background: blue;
z-index: 800;
}
<section class="hexagon-gallery">
<div class="hex"><img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&dl=aerial-aerial-photo-aerial-photography-1421264.jpg&fm=jpg" alt="some"></div>
<div class="hex"></div>
<div class="hex"></div>
</section>
要调整形状,请修改 85%
和 15%
(如果您想保持对称形状,它们的总和应始终为 100)。
例如改用 75% 和 25% 会使 Angular 变大。
不要忘记将 grid-auto-columns
值更改为 width * (25*2)%
,因此在本例中为 120px
保持每个元素之间的正确间距。
使用这些参数的示例:
关于javascript - 如何制作内联六边形画廊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72352447/
我正在为我的网站编辑/创建以下脚本。正如你在下面看到的,我希望他添加一个 在每一行的开头。 (很难解释)。然后使用 var“getal”,我希望他在 4 个项目之后结束这个 DIV 标签(4x for
您好,我想使用 android 画廊和 gridview 教程开发相册,当我在 gridview 中单击图像时,单击图像位置的画廊 Activity 。 最佳答案 如果我是对的,您需要使用其位置转到图
我正在计划一个动态的 PHP 照片库,但在确定通过 MySQL 检索缩略图后显示缩略图的最佳方式时遇到了困难。我考虑过使用内联无序列表,但这导致拇指一个叠一个(触摸)。还尝试了一个表格,但不确定如何在
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
您好,我在使用 JS 创建动态图库时遇到了问题: 我不知道如何使用 JS - “gallery-pk-1-1”获取我的画廊 我不会用JS在相册中添加图片 点击打开漂亮的画廊(如果我只是使用上
有人会告诉我为什么:悬停不检测正确的 child 只将整体视为一个元素,即使我区分了更多的 child 并且一直在同一屏幕上更改我,如何解决?当我尝试将鼠标悬停在元素“.image”上时,我需要这样做
我正在尝试制作一个响应式 9×9 画廊,在悬停时带有叠加层(尝试使用带有颜色和文本的 div)。像这样:Slide in Overlay from the Bottom . 但是,我不能完全覆盖图像。
我想实现一个允许用户将项目拖出的画廊。这不应该妨碍滚动/滑动。 鉴于界面布局,用户只能沿垂直路径将项目拖出图库,并水平滚动图库。 这可行吗?有没有一种简单的方法来检测水平运动,将它们推迟到画廊的事件处
我正在尝试使用 Gallery 小部件构建一组水平滚动的 Web View 。问题是我无法滑动 View ,这当然适用于图像库。按照食谱代码,在 Activity 的 onCreate() I 中:
我正在尝试获取一个 slider 来展示我在帖子中的图片。我目前已设置好所有内容,但我只有一个 li 元素显示所有三张图片。我很想拥有三个 li 元素,每个元素显示一张图片,但我不知道如何自动隔离每张
我们使用的是 jQuery 1.7.1 和 Fancybox 1.3.4。我是 Fancybox 的新手。昨天之前我从未使用过它,但它在我正在工作的网站上广泛使用。设立 Fancybox 的人被解雇了
我想在我的 Activity 中查看画廊,但我不知道它发生了什么,它没有显示任何内容并崩溃。 在创建 Activity 方法时,我有: // initializing gallery view wit
我想根据数组中设置的图像数量创建一个图像 block 。喜欢这个画廊 block : [![在此处输入图像描述][1]][1] 我尝试的是这样的:
我有几个Venobox同一页面上的画廊。有些画廊有数百张照片,这就是为什么我只显示每个画廊的前 3 张缩略图。 当用户开始查看某个图库(单击任何缩略图)时,必须出现单击的图像,并且后台
我正在将 GLightbox JS 库用于作品集图库,并希望在单击内部元素外部时能够关闭图库。 我发现了类似性质的其他问题,但我避免使用 jQuery,并且无法找到适合此特定用例的解决方案。另外,看起
所以我试图循环遍历这个数组并每隔几秒更改一个图像源。现在我有一个 onload 事件调用 setTimeOut 方法,我认为该方法应该在页面加载后 5 秒更改图像,但它是立即执行的。问题是什么?这是我
我对 javascript 相当陌生,但我基本上试图通过图库进行下一次/上一次点击。我设法找到了教程和位来获取图像以供点击。但是我似乎无法弄清楚如何在第四张(最后一张)图像之后返回到该系列的开头。 这
我有一页 6 张图片,每张图片都不同的房子。单击时,我希望每张图像都能打开一个 fancybox 画廊,其中包含同一所房子的 4 张新的更详细的图像。最后,我希望 fancybox 中的 4 张详细照
我正在开发一个带有缩略图的简单 jQuery 图片库。 我想要的部分功能是,如果您单击当前显示的主画廊幻灯片 .show,它会删除 show 类,并淡出然后淡入下一张幻灯片并向其添加一个 show 类
我正在创建一个模板。除了 jquery 图像库之外,所有 xhtml/css 工作都已完成。周围有太多jquery库,我不知道如何根据情况定制它们 这是一个三列模板。第一列有导航。第二列将从第三列的缩
我是一名优秀的程序员,十分优秀!