html/css шестиугольник с изображением внутри

Question

html/css шестиугольник с изображением внутри

Есть ли возможность разместить изображение внутри шестиугольника? Я привык к ячейкам шестиугольной формы в html, но я не смог заполнить их изображением (фон?).

Вот что я попробовал:

.top {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: red;
  border-left-color: transparent;
}
.middle {
  height: 20px;
  background: red;
  width: 40px;
  display: block;
}
.bottom {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: red;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

<div class="hexagon pic">
  <span class="top" style="background: url(http://placekitten.com/400/400/)"></span>
  <span class="middle" style="background: url(http://placekitten.com/400/400/)"></span>
  <span class="bottom" style="background: url(http://placekitten.com/400/400/)"></span>
</div>


<div class="hexagon">
  <span class="top" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
  <span class="middle" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
  <span class="bottom" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
</div>

<div class="hexagon">
  <span class="top"><img src="http://placekitten.com/400/400/" /></span>
  <span class="middle"><img src="http://placekitten.com/400/400/" /></span>
  <span class="bottom"><img src="http://placekitten.com/400/400/" /></span>
</div>

вот скрипка: http://jsfiddle.net/jnz31/kGSCA/

30

html css svg css-shapes

Источник

user600121 15 сен '11 в 15:32

7 ответов

Решение

Самый гибкий способ получения шестиугольника с изображением - использовать встроенный SVG:

svg{
  width:30%;
}

<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
</svg>

Существует как минимум два способа получения гексагонального изображения с помощью SVG:

сделать шестиугольный многоугольник и заполнить многоугольник изображением и pattern элемент (подход, который я использую в предыдущем фрагменте)
обрезать изображение шестиугольным многоугольником (см. следующий фрагмент)

svg{width:30%}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="hexClip">
      <polygon points="50 1 99 25 99 75 50 99 1 75 1 25"/>
    </clipPath>
  </defs>  
  <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" clip-path="url(#hexClip)"/>
</svg>

Подход SVG позволяет контролировать многие аспекты формы и изображения шестиугольника. И они могут быть стилизованы с помощью CSS. Вот пример:

svg{
  width:30%;
  margin:0 auto;
}
#hex{
  stroke-width:2;
  stroke: teal;
  fill-opacity:0.6;
  transition:fill-opacity .8s;
}
#hex:hover{
  fill-opacity:1;
}
#text{
  stroke-width:0.5;
  stroke:teal;
  fill-opacity:0.4;
  fill:teal;
  transition:fill-opacity .8s;
}
#hex:hover + #text{
  fill-opacity:1;
}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
  <text id="text" font-size="20" x="50" y="50" text-anchor="middle">Some text</text>
</svg>

Для другого подхода, чтобы сделать шестиугольники с изображением внутри, проверьте этот вопрос: Отзывчивая сетка шестиугольников

30

Источник

user1811992 08 июл '15 в 05:33

Новый и простой подход будет использовать CSS3 clip-path имущество.

Из документации:

CSS-свойство clip-path предотвращает отображение части элемента путем определения отображаемой области отсечения, т. Е. Отображается только определенная область элемента.

Следующий css покажет прямоугольный элемент в форме шестиугольника:

div.hexagon {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

Выходное изображение:

body {
  background: linear-gradient(orange, yellow);
  min-height: 100vh;
  margin: 0;
}
.hexagon {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: url("https://i.imgur.com/waDgcnc.jpg") no-repeat;
  background-size: cover;
  margin: 10px auto;
  height: 200px;
  width: 200px;      
}

<div class="hexagon">
  
</div>

Мы можем использовать это свойство для рисования любых фигур, которые мы хотим. Ниже приведено несколько примеров:

div.pentagon {
  clip-path: polygon(50% 0, 100% 45%, 80% 100%, 20% 100%, 0 45%);
}
div.octagon {
  clip-path: polygon(33.33% 0%, 66.66% 0%, 100% 33.33%, 100% 66.66%, 66.66% 100%, 33.33% 100%, 0 66.66%, 0 33.33%);
}

Выходное изображение:

body {
  background: linear-gradient(orange, yellow);
  min-height: 100vh;
  margin: 0;
}
div {
  background: url("https://i.imgur.com/waDgcnc.jpg") no-repeat;
  background-size: cover;
  margin: 10px 20px;
  height: 170px;
  width: 170px;
  float: left;
}

.pentagon {
  clip-path: polygon(50% 0, 100% 45%, 80% 100%, 20% 100%, 0 45%);
}

.octagon {
  clip-path: polygon(33.33% 0%, 66.66% 0%, 100% 33.33%, 100% 66.66%, 66.66% 100%, 33.33% 100%, 0 66.66%, 0 33.33%);
}

<div class="pentagon">
  
</div>
<div class="octagon">
  
</div>

Замечания: clip-path Свойство css не поддерживается в IE и Edge. Однако в будущих версиях Edge ожидается поддержка этого свойства.

19

Источник

user5933656 30 дек '16 в 13:03

Вы можете сделать это, наложив углы следующим образом:

http://jsfiddle.net/Eric/kGSCA/3/

HTML:

<div class="hexagon pic">
    <span class="top"></span>
    <span class="bottom"></span>
</div>

CSS:

.hexagon {
    background: url(http://placekitten.com/400/400/);
    width: 400px;
    height: 346px;
    position: relative;
}

.hexagon span {
    position: absolute;
    display: block;
    border-left: 100px solid red;
    border-right: 100px solid red;
    width: 200px;
}

.top {
    top: 0;
    border-bottom: 173px solid transparent;
}

.bottom {
    bottom: 0;
    border-top: 173px solid transparent;
}

7

Источник

user102441 15 сен '11 в 16:15

Вот простой способ, если вам нужно только один рис для размещения.

<style>
.hex{
    width:80px;
    height:80px;
    background-image: url(http://placekitten.com/400/400/);
    background-size: cover;
    position:relative;
    margin:10px;
}
.hex:before, .hex:after{
    content:"";
    position:absolute;
    top:0px;height:40px;width:0px; /* 40 = height/2 */
    z-index:1;
    border:20px solid #FFF; /*change #FFF to your bg color*/
}
.hex:before{
    left:-20px; /* -1*borderWidth */
    border-right:40px solid transparent;/* width/2 */
}
.hex:after{
    left:40px; /* width/2 */
    border-left:40px solid transparent;/* width/2 */
}
</style>
<div class="hex"></div>

нужна граница? фоновое изображение будет легче и быстрее.

<div class="hex">
    <div style="position:absolute;top:-20px;left:-20px;bottom:-20px;right:-20px;
        z-index:2;background-image:url(/images/hexagon.png);">
    </div>
</div>

2

Источник

user1423539 27 мар '13 в 11:26

Я не думаю, что есть способ сделать это с помощью чистого HTML/CSS без какой-либо внешней графики. Могут быть некоторые умные хаки, использующие методы, на которые вы ссылаетесь в вопросе, но они будут просто - умные хаки - поэтому, вероятно, не лучше всего подходят для использования на живом веб-сайте (и, как и в случае большинства "умных хаков", также, вероятно, по крайней мере, с некоторыми проблемами совместимости браузера).

Вы можете сделать это с помощью Canvas или SVG.

Canvas - это особенность растровой графики и часть спецификации HTML5. SVG - это язык векторной графики, который можно использовать на HTML-странице.

Обе они являются функциями современных браузеров, и поэтому, к сожалению, отсутствуют в большинстве версий Internet Explorer (IE8 и более ранних версий).

К счастью, однако, IE поддерживает язык, похожий на SVG, называемый VML, и есть ряд библиотек javacript, которые позволяют IE использовать Canvas и SVG путем преобразования их в VML.

Смотрите также:

С помощью любого из инструментов, указанных выше, вы можете использовать Canvas или SVG, чтобы нарисовать шестиугольную (или любую другую) фигуру и заполнить ее графикой.

Надеюсь, это поможет.

0

Источник

user352765 15 сен '11 в 15:45

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

Просто поместите прозрачный png поверх изображения с z-index

0

Источник

user613020 15 сен '11 в 15:44

Другие вопросы по тегам html css svg css-shapes

user885556 15 сен '11 в 20:55 2011-09-15 20:55 · Accepted Answer · 2011-09-15 20:55

С CSS3 почти все возможно: http://jsfiddle.net/kizu/bhGn4/

Там я использовал разные повороты с overflow: hiddenТаким образом, вы можете получить кросс-браузерные (ну, современные кросс-броузерные) маски, которые даже можно скрыть и щелкнуть на маскируемой области.

74

Источник

user885556 15 сен '11 в 20:55