3

Вот макет

введите сюда описание изображения

Нужно сверстать такой макет. Как это сделать?

1
  • 2
    обычный clip-path подойдет 22 фев 2020 в 21:28

4 ответа 4

7

Можно с помощью CSS. В Edge работает корректно (спасибо @MaximLensky за проверку).

Один вариант:

.hexagon {
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  width: 400px;
  height: 200px;
  margin: 0 0 0 -80px;
}

.hexagon>span {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.hexagon>span>span {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 600px;
  background-image: url(https://avatars.mds.yandex.net/get-zen_doc/1706517/pub_5d961e83e6cb9b00b2587441_5d961f8afbe6e700b1484088/scale_1200);
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
<div class="hexagon"><span><span></span></span></div>

Ещё один:

.hexagon {
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  width: 200px;
  height: 400px;
  margin: -80px 0 0 20px;
}

.hexagon>span {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.hexagon>span>span {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 600px;
  background-image: url(https://avatars.mds.yandex.net/get-zen_doc/1706517/pub_5d961e83e6cb9b00b2587441_5d961f8afbe6e700b1484088/scale_1200);
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
<div class="hexagon"><span><span></span></span></div>

И ещё:

.hexagon {
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  width: 200px;
  height: 200px;
  margin: 0;
}

.hexagon>span {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.hexagon>span>span {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 600px;
  background-image: url(https://avatars.mds.yandex.net/get-zen_doc/1706517/pub_5d961e83e6cb9b00b2587441_5d961f8afbe6e700b1484088/scale_1200);
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
<div class="hexagon"><span><span></span></span></div>

4

SVG clip-path

картинку взял у Sevastopol'

Пример с обводкой:

<svg width="450" height="450" viewBox="-5 -5 465 460"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cp">
        <path d="M0,223, 113,29 338,29 451,223 338,419 113,419z" />
    </clipPath>
  </defs>
  <image xlink:href="https://avatars.mds.yandex.net/get-zen_doc/1706517/pub_5d961e83e6cb9b00b2587441_5d961f8afbe6e700b1484088/scale_1200" 
         x="0" y="0" 
         width="100%" height="100%" 
         preserveAspectRatio="none"
         clip-path="url(#cp)"/>
  <path d="M0,223, 113,29 338,29 451,223 338,419 113,419z" 
        fill="none" stroke="#ccc" stroke-width="10" stroke-linejoin="round"/>
</svg>

Пример без обводки

<svg width="450" height="450" viewBox="-5 -5 465 460"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cp">
        <path d="M0,223, 113,29 338,29 451,223 338,419 113,419z" />
    </clipPath>
  </defs>
  <image xlink:href="https://avatars.mds.yandex.net/get-zen_doc/1706517/pub_5d961e83e6cb9b00b2587441_5d961f8afbe6e700b1484088/scale_1200" 
         x="0" y="0" 
         width="100%" height="100%" 
         preserveAspectRatio="none"
         clip-path="url(#cp)"/>
</svg>

Размер в моём случае фиксированный но удалив width и height из тега то можно манипулировать svg из css и так же если удалить width и height из тега то clip-path станет резиновый

Скрин с Edge

введите сюда описание изображения

2
3

<svg style='border:1px solid black' width='400' height='400'>
  <pattern id='a' width='100%' height='100%' patternUnits='objectBoundingBox'>
    <image xlink:href='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQUMJ8GSBXLfQ_W66kOxzqAcuRGs_mYaDh7Vpf74mvP27KaHtid' x="0" y="0" width="300" />
  </pattern >
  <polygon points="120,180 40,120 120,60 220,60 280,120 220,180" fill="url(#a)"  />
</svg>

3
  • конечно попытка жесть - но делается это на path но не на polygon 23 фев 2020 в 2:59
  • @MaximLensky почему лучше path чем polygon ?
    – Leks
    23 фев 2020 в 5:07
  • полигон не лучше и path не лучше - просто path очень гибкий 23 фев 2020 в 5:39
2

<svg style='border:1px solid black' width='400' height='400'>
  <clipPath  id='a'>
    <polygon points="120,180 40,120 120,60 220,60 280,120 220,180" fill="url(#a)"  />
  </clipPath >
  <image clip-path='url(#a)' x='50' y='50' xlink:href='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQUMJ8GSBXLfQ_W66kOxzqAcuRGs_mYaDh7Vpf74mvP27KaHtid' x="0" y="0" width="300" />
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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