Меня могут немного раскритиковать за этот вопрос, поэтому я скажу это сразу. Предыдущие ответы на Stackoverflow не сработали.
Я пытаюсь получить изображение в форме шестиугольника, и для этого я хочу иметь 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;
}
Обратите внимание, что он работает только с изображением, примененным как background-image
из css
.
не совсем то, что я хотел, потому что id скорее использует его как один div, но он работает! угадайте, если вы не хотите фоновое изображение, то метод с псевдоэлементами работает лучше. Спасибо большое!
я не вижу шестиугольника в вашем css, приведите минимальный воспроизводимый пример