伪元素不显示溢出隐藏 CSS
Pseudo elemet not showing with overflow-hidden CSS
问这个问题可能会让我有点不高兴,所以我会马上说出来。之前在 Whosebug 上的回答都没有用。
我想要一个六边形的图像,为此,我想要一个 div
作为图像的父级。
然后我使用 CSS 六边形生成器并将 CSS 添加到我的 div
元素 overflow: hidden
.
问题:我能看到的唯一六边形部分是主矩形(非伪元素),而不是两边的两个三角形(伪元素)。我尝试了从改变位置、摆脱动画以及将 overflow: hidden
添加到不同部分的所有方法。
CSS:
.image-container {
overflow: hidden;
position: relative;
background-color: #64C7CC;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
&::after, &::before {
// overflow: hidden;
content: "";
// position: absolute;
width: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}
&::before {
bottom: 100%;
}
&::after {
top: 100%;
width: 0;
}
// // overflow: hidden;
// z-index: 100;
// position: relative;
// background-color: aqua;
// @extend hexagon;
}
.image-container img {
position: absolute;
top: -10px;
left: -300px;
}
HTML:
<div className="image-container" data-aos="fade-right">
<img src='images/profile-pic.JPG' alt="profile pictures"/>
</div>
结果:
希望您能提供帮助,因为我已经坐了很长时间了。如果您需要澄清,请在明天早上添加评论和回复。
试试这个:
HTML:
<div class="img-hexagon hexagon1">
<div class="hexagon-helper-1">
<div class="hexagon-helper-2">
</div>
</div>
</div>
CSS:
.image-container img {
position: absolute;
top: -10px;
left: -300px;
}
.img-hexagon {
overflow: hidden;
visibility: hidden;
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-helper-1 {
overflow: hidden;
width: 100%;
height: 100%;
transform: rotate(-60deg);
}
.hexagon-helper-2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(https://i.stack.imgur.com/cYBwF.png);
visibility: visible;
transform: rotate(-60deg);
}
.hexagon1 {
width: 400px;
height: 200px;
margin: 0 0 0 -80px;
}
请注意,它仅适用于从 css
应用为 background-image
的图像
问这个问题可能会让我有点不高兴,所以我会马上说出来。之前在 Whosebug 上的回答都没有用。
我想要一个六边形的图像,为此,我想要一个 div
作为图像的父级。
然后我使用 CSS 六边形生成器并将 CSS 添加到我的 div
元素 overflow: hidden
.
问题:我能看到的唯一六边形部分是主矩形(非伪元素),而不是两边的两个三角形(伪元素)。我尝试了从改变位置、摆脱动画以及将 overflow: hidden
添加到不同部分的所有方法。
CSS:
.image-container {
overflow: hidden;
position: relative;
background-color: #64C7CC;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
&::after, &::before {
// overflow: hidden;
content: "";
// position: absolute;
width: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}
&::before {
bottom: 100%;
}
&::after {
top: 100%;
width: 0;
}
// // overflow: hidden;
// z-index: 100;
// position: relative;
// background-color: aqua;
// @extend hexagon;
}
.image-container img {
position: absolute;
top: -10px;
left: -300px;
}
HTML:
<div className="image-container" data-aos="fade-right">
<img src='images/profile-pic.JPG' alt="profile pictures"/>
</div>
结果:
希望您能提供帮助,因为我已经坐了很长时间了。如果您需要澄清,请在明天早上添加评论和回复。
试试这个:
HTML:
<div class="img-hexagon hexagon1">
<div class="hexagon-helper-1">
<div class="hexagon-helper-2">
</div>
</div>
</div>
CSS:
.image-container img {
position: absolute;
top: -10px;
left: -300px;
}
.img-hexagon {
overflow: hidden;
visibility: hidden;
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-helper-1 {
overflow: hidden;
width: 100%;
height: 100%;
transform: rotate(-60deg);
}
.hexagon-helper-2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(https://i.stack.imgur.com/cYBwF.png);
visibility: visible;
transform: rotate(-60deg);
}
.hexagon1 {
width: 400px;
height: 200px;
margin: 0 0 0 -80px;
}
请注意,它仅适用于从 css
background-image
的图像