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

Ответ 1

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

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

Ответ 2

Наиболее гибким способом получения шестиугольника с изображением является использование встроенного 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>

Ответ 3

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

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;
}

Ответ 4

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

<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>

нужна граница? фон img будет проще и быстрее.

<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>

Ответ 5

Новый и простой подход заключается в использовании свойства css3 clip-path.

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

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

После 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>

Ответ 6

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

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

Ответ 7

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

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

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

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

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

См. также:

• Как использовать элемент canvas HTML5 в IE?
• http://code.google.com/p/svg2vml/
• http://raphaeljs.com/

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

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

Ответ 8

используйте этот сайт и создайте собственный шестиугольник: csshexagon.com