Псевдоэлемент не отображается со скрытым переполнением CSS

Меня могут немного раскритиковать за этот вопрос, поэтому я скажу это сразу. Предыдущие ответы на 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>

Результат:

Я надеюсь, что вы можете помочь, поскольку я сидел на этом довольно долгое время. Если вам нужны разъяснения, пожалуйста, просто добавьте комментарий, и я отвечу завтра утром.

я не вижу шестиугольника в вашем css, приведите минимальный воспроизводимый пример

Alberto Sinigaglia 26.12.2020 01:20
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
139
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это:

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, но он работает! угадайте, если вы не хотите фоновое изображение, то метод с псевдоэлементами работает лучше. Спасибо большое!

Leon_K 26.12.2020 15:39

Другие вопросы по теме