wake-up-neo.com

hTML/CSS-Sechseck mit Bild innen

Gibt es eine Chance, ein Bild in eine Sechseckform zu platzieren? Ich bin es gewohnt, hexagonal geformte Zellen in HTML zu erstellen, aber ich könnte es nicht mit einem (Hintergrund?) Bild füllen.

Folgendes habe ich ausprobiert:

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

hier ist eine Geige: http://jsfiddle.net/jnz31/kGSCA/

23
honk31

Mit CSS3 ist fast alles möglich: http://jsfiddle.net/kizu/bhGn4/

Dort habe ich verschiedene Drehungen mit overflow: hidden verwendet, so dass Sie eine Cross-Browser-Maske (also modern Cross-Broser) -Masken erhalten können, die auf dem maskierten Bereich sogar abdeckbar und anklickbar sein kann.

64
kizu

Der flexibelste Weg, um ein Sechseck mit einem Bild zu erzielen, ist die Verwendung einer Inline-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>

Es gibt mindestens zwei Möglichkeiten, mit SVG ein hexagonales Bild zu erhalten:

  • erstellen eines hexagonalen Polygons und Füllen des Polygons mit einem Bild und dem Element pattern (Ansatz, den ich im vorherigen Snippet verwende)
  • das Bild mit einem sechseckigen Polygon ausschneiden (siehe nächster Ausschnitt)

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>

Der SVG-Ansatz ermöglicht die Kontrolle über viele Aspekte der Form und des Bildes des Sechsecks. Und sie können mit CSS gestaltet werden. Hier ist ein Beispiel :

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>

Für einen anderen Ansatz, um Sechsecke mit einem Bild im Inneren zu erstellen, überprüfen Sie diese Frage: Responsives Raster aus Sechsecken

14
web-tiki

Sie können dies tun, indem Sie die Ecken wie folgt überlagern:

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

Ein neuer und einfacher Ansatz wäre die Verwendung der Eigenschaft css3 clip-path.

Aus Dokumentation :

Die CSS-Eigenschaft clip-path verhindert, dass ein Teil eines Elements von Anzeige durch Definieren eines anzuzeigenden Ausschnittsbereichs, d. h., Es wird nur ein bestimmter Bereich des Elements angezeigt.

Folgendes CSS zeigt ein rechteckiges Element in Sechseckform:

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

Ausgabebild:

 Output Image shows image in hexagon shape

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>

Wir können diese Eigenschaft verwenden, um beliebige Formen zu zeichnen. Nachfolgend einige Beispiele:

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

Ausgabebild:

 Output Image showing other examples of clip path

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>

Hinweis:clip-path css-Eigenschaft wird in IE und Edge ..__ nicht unterstützt. Es wird jedoch erwartet, dass zukünftige Versionen von Edge diese Unterstützung haben Eigentum.

5
Mohammad Usman

hier ist ein einfacher Weg, wenn Sie nur ein Bild zum Platzieren benötigen.

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

brauche eine Grenze? ein Hintergrundbild wird einfacher und schneller.

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

Ich weiß nicht, ob es die Antwort ist, nach der Sie suchen, aber Sie könnten ein Sechseck in Form eines transparenten .png über das Bild legen, das Sie als Sechseck darstellen möchten, und es wie eine Maske wirken lassen.

Legen Sie einfach das transparente PNG über das Bild mit Z-Index

0
Ricardo

Ich glaube nicht, dass es eine Möglichkeit gibt, mit reinem HTML/CSS ohne externe Grafiken zu arbeiten. Es mag einige clevere Hacks geben, bei denen die Techniken verwendet werden, mit denen Sie in der Frage verlinkt sind, aber es wäre genau das - clevere Hacks - und daher wahrscheinlich nicht für eine Live-Website geeignet (und wie wahrscheinlich auch für die meisten "cleveren Hacks") mit mindestens einigen Cross-Browser-Kompatibilitätsproblemen).

Du könntest es mit Canvas oder SVG machen.

Canvas ist eine Bitmap-Grafikfunktion und Teil der HTML5-Spezifikation. SVG ist eine Vektorgrafiksprache, die innerhalb einer HTML-Seite verwendet werden kann.

Beides sind Funktionen moderner Browser und fehlen daher in den meisten Versionen des Internet Explorers (IE8 und früher).

Glücklicherweise unterstützt IE jedoch eine SVG-ähnliche Sprache namens VML, und es gibt eine Reihe von Javacript-Bibliotheken, die es IE ermöglichen, sowohl Canvas als auch SVG zu verwenden, indem sie in VML konvertiert werden.

Siehe auch:

Mit einem der oben verknüpften Werkzeuge können Sie dann mit Canvas oder SVG eine sechseckige (oder eine beliebige andere) Form zeichnen und diese mit Ihrer Grafik füllen.

Hoffentlich hilft das.

0
Spudley