1

Подскажите пожалуйста как сделать такой шестиугольник как на фото? С внешней тенью вроде все получилось, но внутреннюю тень с золотым как-бы ободком никак не могу сделать. Помогите пожалуйста. Спасибо

.main-content__hexagon-1{
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

.main-content__column{
        clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        width: 400px;
        height: 350px;
        background-color: #161616;
    }

.main-content__item{
        filter: drop-shadow(0px 0px 8px rgb(0 0 0 / 70%));
    }

.main-content__text{
        font-weight: 400;
        font-size: 40px;
        line-height: math.div(49, 40);
        text-transform: lowercase;
        color: #ccba96;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 300px;
        width: 340px;
        clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        background-color: #161616;
        position: relative;
        top: 25px;
        left: 30px;
    }
<div class="main-content__hexagon-1">
    <div class="main-content__column">
        <div class="main-content__item">
            <a href="#" class="main-content__text">Development</a>
        </div>
    </div>
</div>

3
  • 1
    А зачем, если есть svg?
    – andreymal
    27 окт 2022 в 18:38
  • Вы знаете толк в извращениях...специально для этих целей был создан svg вот как раз что бы передавать инфографику 27 окт 2022 в 21:31
  • @andreymal, а я опять намутил div)))
    – Qwertiy
    28 окт 2022 в 0:52

2 ответа 2

2

большую часть свойств копировал как попало, да и палитра градиента не сказать чтоб прям соответствует, но в целом идея думаю ясна. p.s. если не нравится псевдо-элемент, его можно заменить на очередной врапер

.main-content__hexagon-1{
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

.main-content__column{
        clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        width: 400px;
        height: 350px;
        background-color: #161616;
    }

.main-content__item{
        filter: drop-shadow(0px 0px 8px rgb(0 0 0 / 70%));
    }

.main-content__text{
        font-weight: 400;
        font-size: 40px;
        line-height: math.div(49, 40);
        text-transform: lowercase;
        color: #ccba96;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 300px;
        width: 340px;
        clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        background: linear-gradient(to top right, black, #ccba56); /* border color */
        position: relative;
        top: 25px;
        left: 30px;
    }
.main-content__text:after{
  content: 'Development'; /* ancor */
  font-weight: 400;
  font-size: 40px;
  line-height: math.div(49, 40);
  text-transform: lowercase;
  color: #ccba96;
  background-color: #161616;
  position: absolute;
  width: 98%; height: 98%; /* border size */
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
<div class="main-content__hexagon-1">
    <div class="main-content__column">
        <div class="main-content__item">
            <a href="#" class="main-content__text"></a>
        </div>
    </div>
</div>

2

div {
  width: 90vmin;
  margin: 5vmin auto;
  position: relative;
  z-index: 0;
  aspect-ratio: 1.1547005383792517;
  background: #333;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

div::before, div::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: inherit;
}

div::before {
  inset: 7.5%;
  background: linear-gradient(240deg, red, transparent);
}

div::after {
  inset: 10%;
  background: black;
}

div {
  font-size: 24vmin;
  color: white;
  line-height: 62vmin;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
<div>Тыква!</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.