Fatal编程技术网
  • html/
  • Html 六边形响应网格

Html 六边形响应网格

html css responsive-design

Html 六边形响应网格,html,css,responsive-design,css-shapes,Html,Css,Responsive Design,Css Shapes,我从互联网上在我的网站上加载了多个图像。是否可以在响应网格中为所有这些图像提供一个六边形 <div> <img src="link" class="Image"> </div> <div> <img src="link" class="Image"> </div> ... ... 我找到了多种方法，但您需要在CSS代码中填写imagesrc。 这对我来说是不可能的，因为网站使用jQuery从互联网随机

我从互联网上在我的网站上加载了多个图像。是否可以在响应网格中为所有这些图像提供一个六边形

<div>
    <img src="link" class="Image">
</div>

<div>
    <img src="link" class="Image">
</div>
...


...
我找到了多种方法，但您需要在CSS代码中填写image
src
。 这对我来说是不可能的，因为网站使用jQuery从互联网随机加载图像，所以我不能使用背景图像

我试过这样做：

您可以创建一个透明六边形的图像，并将其叠加在注入图像上

HTML:

<div class="hexagon">
    <!-- get the image -->
    <img src="injected.jpg" />

    <!-- apply hexagon shape to it -->
    <img src="transparentHex.png" />    
</div>

.hexagon {
    position: relative;
}

.hexagon > img {
    position: absolute;
}
演示：

您可以在
%
+伪元素中使用
垂直填充
，开始绘制正方形

然后，使用第二个元素绘制遮罩

HTML
CSS


海克斯先生{
位置：相对位置；
保证金：自动；
文本对齐：居中；
溢出：隐藏；
空白：nowrap；
显示：表格；
}
海克斯：以前{
内容：''；
填充顶部：120%；
显示：内联块；
垂直对齐：中间对齐；
}
.海克斯：之后{
内容：''；
位置：绝对位置；
最高：0%；
左-10%；
宽度：120%；
填充顶部：120%；
变换：旋转（45度）旋转（45度）；
文本对齐：居中；
盒影：0 200px白色；；
}
.十六进制img{
显示：内联块；
垂直对齐：中间对齐；
利润率：0-10px；
}

HTML:
SASS（带指南针）：

$width:400px；
$fillColor:#CCC；
$height:$width*sin（60度）；
.六边形{
显示：内联块；
位置：相对位置；
宽度：$width；
}
.hexagon:之前，.hexagon:之后{
内容：''；
显示：块；
宽度：50%；
边框：0实心透明；
}
.hexagon:以前{
边框底色：$fillColor；
边框宽度：0$宽/4$高/2；
}
.六边形：之后{
边框顶部颜色：$fillColor；
边框宽度：$height/2$width/40；
}
.hexagon>.contents{
位置：绝对位置；
顶部：0；底部：0；
左：25%；右：25%；
}
然后，如果要在六边形中放置图像，请在
内使用





例如，将其样式设置为：


#myimg{
位置：绝对位置；
顶部：0；底部：0；
左：0；右：0；
保证金：自动；
宽度：50%；
}

好的，这里有一个干净的、跨浏览器兼容的解决方案，它甚至可以让您将六边形蜂窝状化：

为此，您需要将每个图像包装在两个容器中，因为一个用于左上/右下截止，另一个用于右上/左下截止


<div class="outerclip">
    <div class="innerclip">
        <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
    </div>
</div>


演示：

注意：为了提高渲染质量，我建议给
.outerclip
和
.innerclip
提供相同的固定高度

要获得蜂巢，可以将多个图像放入
行
容器中，然后将每个奇数行偏移两个像素，如下所示：




演示：
如果是关于蜂窝，
这里有一个CSS的可能性。



不要在img标记中使用class，而是在容器img中使用css


.container img{ your code}


它将为您节省大量将类放入图像的麻烦
试试这把小提琴



这是的目录和存储库。
此处的代码未维护。它被移动到github并得到改进，因此应该进行评论、问题报告和贡献



此技术使用：


    

  • 标记
    • 

  • 无序列表：每个六边形都包含在一个
    • 标记和一个
    中，图像会根据六边形形状调整大小
    • 

  • 六边形上方的悬停效果：文本以透明覆盖在图像上的方式滑入
    • 

  • 每个六边形保持其边界：每个六边形的悬停效果（或单击事件）仅在实际形状内部触发
    • 


完整代码
以下代码段不是网格的最新版本。系统保持最新状态。可以在那里提出问题和作出贡献



*{
保证金：0；
填充：0；
}
身体{
字体系列：“开放式Sans”、arial、Sans serif；
背景：rgb（123、158、158）；
}
#六边形网格{
溢出：隐藏；
宽度：90%；
保证金：0自动；
填充：0.707%0；
}
#hexGrid：之后{
内容：“；
显示：块；
明确：两者皆有；
}
海克斯先生{
位置：相对位置；
列表样式类型：无；
浮动：左；
溢出：隐藏；
可见性：隐藏；
-webkit变换：旋转（-60度）倾斜（30度）；
-ms变换：旋转（-60度）倾斜（30度）；
变换：倾斜旋转（-60度）（30度）；
}
.十六进制*{
位置：绝对位置；
能见度：可见；
}
贺信先生{
显示：块；
宽度：100%；
身高：100%；
文本对齐：居中；
颜色：#fff；
溢出：隐藏；
-webkit变换：倾斜（-30度）旋转（60度）；
-ms变换：倾斜（-30度）旋转（60度）；
变换：倾斜（-30度）旋转（60度）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
/*十六进制内容*/
.十六进制img{
左-100%；
右图：-100%；
宽度：自动；
身高：100%；
保证金：0自动；
}
.hex h1、.hex p{
宽度：90%；
填充：0.5%；
背景色：#008080；
背景色：rgba（0,128,128,0.8）；
字体系列：“Raleway”，无衬线；
-webkit过渡：顶部。2放松，底部。2放松。2填充。2放松；
过渡：顶部。2放松，底部。2放松。2填充。2放松；
}
.十六进制h1{
底部：110%；
字体：斜体；
字体大小：正常；
字号：1.5em；
填充顶部：100%；
垫底：100%；
}
.十六进制h1：之后{
内容：''；
显示：块；
位置：绝对位置；
底部：-1px；
左：45%；
宽度：10%；
文本对齐：居中；
z指数：1；
边框底部：2倍实心#fff；
}
.六角p{
垫面：50%；
最高：110%；
垫底：50%；
}
/*悬停效应*/
.hexIn:悬停h

<div class="outerclip">
    <div class="innerclip">
        <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
    </div>
</div>



.outerclip {
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    -transform: skew(-30deg);
    overflow: hidden;
    display: inline-block;
}
.innerclip {
    -webkit-transform: skew(50deg);
    -ms-transform: skew(50deg);
    transform: skew(50deg);
    overflow: hidden;
    display: inline-block;
}
img {
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
}



  <div><!-- even div gets a negative bottom margin. all of them gets a negative right margin -->
  <span><!-- skewed and rotated -->
    <img src="http://lorempixel.com/200/200/food/1"/><!-- rotated back, unskewed and rescaled -->
  </span>
</div>



.container img{ your code}



<div class="hex one">
       <div class="images1">
          <div class="images2"></div>
       </div>
    </div>

    <div class="hex two">
       <div class="images1">
          <div class="images2"></div>
       </div>
    </div>



BODY {
    background: url(http://placekitten.com/600/600);
}
.hex {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
    }
.images1{
    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);
    }
.images2{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://placekitten.com/238/240);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.images2:hover {
    background-image: url(http://placekitten.com/440/242);
    }

.one {
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
    }
.two {
    width: 200px;
    height: 400px;
    margin: -80px 0 0 20px;
    }



<div class="wrapper">

  <section class="hex-grid">

    <div
      ng-repeat="item in app.items"
      class="grid-item repeat-animation">

      <div class="inner">
        <div
          class="inner-inner"
          ng-style="{ 'background-image': 'url({{ item.imgSrc }})' }">

          <a
            href=""
            class="grid-info">

            <div class ="inner-text">
              <div class="inner-text-inner">

                <h2>{{ item.name }}</h2>
                <p>{{item.desc }}</p>

              </div><!-- /.inner-text-inner -->
            </div><!-- /.inner-text -->
          </a><!-- /.grid-info -->
        </div><!-- /.inner-inner -->
      </div><!-- /.inner -->
    </div><!-- /.grid-item -->
  </section><!-- /.hex-grid -->

</div><!-- /.wrapper -->



.hex-grid {
  position: relative;
  width: 80%;
  left: 10%;
  padding-top: 120px;
}
@media (max-width: 767px) {
  .hex-grid {
    width: 100%;
    left: 0;
  }
}
.hex-grid .grid-item {
  position: relative;
  display: inline-block;
  float: left;
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
}
@media (max-width: 633px) {
  .hex-grid .grid-item {
    width: 222%;
    margin: 0 -61%;
    margin-bottom: 10px;
  }
}
@media (min-width: 634px) and (max-width: 1022px) {
  .hex-grid .grid-item {
    width: 133%;
    margin: 0 -42%;
    margin-bottom: -25%;
  }
  .hex-grid .grid-item:nth-child(2),
  .hex-grid .grid-item:nth-child(4),
  .hex-grid .grid-item:nth-child(6),
  .hex-grid .grid-item:nth-child(8),
  .hex-grid .grid-item:nth-child(10),
  .hex-grid .grid-item:nth-child(12),
  .hex-grid .grid-item:nth-child(14),
  .hex-grid .grid-item:nth-child(16),
  .hex-grid .grid-item:nth-child(18),
  .hex-grid .grid-item:nth-child(20),
  .hex-grid .grid-item:nth-child(22),
  .hex-grid .grid-item:nth-child(24),
  .hex-grid .grid-item:nth-child(26),
  .hex-grid .grid-item:nth-child(28),
  .hex-grid .grid-item:nth-child(30) {
    margin-top: 28%;
  }
  .hex-grid .grid-item:nth-child(3),
  .hex-grid .grid-item:nth-child(5),
  .hex-grid .grid-item:nth-child(7),
  .hex-grid .grid-item:nth-child(9),
  .hex-grid .grid-item:nth-child(11),
  .hex-grid .grid-item:nth-child(13),
  .hex-grid .grid-item:nth-child(15),
  .hex-grid .grid-item:nth-child(17),
  .hex-grid .grid-item:nth-child(19),
  .hex-grid .grid-item:nth-child(21),
  .hex-grid .grid-item:nth-child(23),
  .hex-grid .grid-item:nth-child(25),
  .hex-grid .grid-item:nth-child(27),
  .hex-grid .grid-item:nth-child(29) {
    clear: left;
  }
}
@media (min-width: 1023px) and (max-width: 1599px) {
  .hex-grid .grid-item {
    width: 91.6%;
    margin: 0 -29.2%;
    margin-bottom: -17.5%;
  }
  .hex-grid .grid-item:nth-child(2),
  .hex-grid .grid-item:nth-child(5),
  .hex-grid .grid-item:nth-child(8),
  .hex-grid .grid-item:nth-child(11),
  .hex-grid .grid-item:nth-child(14),
  .hex-grid .grid-item:nth-child(17),
  .hex-grid .grid-item:nth-child(20),
  .hex-grid .grid-item:nth-child(23),
  .hex-grid .grid-item:nth-child(26),
  .hex-grid .grid-item:nth-child(29) {
    margin-top: 19%;
  }
  .hex-grid .grid-item:nth-child(4),
  .hex-grid .grid-item:nth-child(7),
  .hex-grid .grid-item:nth-child(10),
  .hex-grid .grid-item:nth-child(13),
  .hex-grid .grid-item:nth-child(16),
  .hex-grid .grid-item:nth-child(19),
  .hex-grid .grid-item:nth-child(22),
  .hex-grid .grid-item:nth-child(25),
  .hex-grid .grid-item:nth-child(28) {
    clear: left;
  }
}
@media (min-width: 1600px) {
  .hex-grid .grid-item {
    width: 66.7%;
    margin: 0 -20.9%;
    margin-bottom: -12.5%;
  }
  .hex-grid .grid-item:nth-child(2),
  .hex-grid .grid-item:nth-child(4),
  .hex-grid .grid-item:nth-child(6),
  .hex-grid .grid-item:nth-child(8),
  .hex-grid .grid-item:nth-child(10),
  .hex-grid .grid-item:nth-child(12),
  .hex-grid .grid-item:nth-child(14),
  .hex-grid .grid-item:nth-child(16),
  .hex-grid .grid-item:nth-child(18),
  .hex-grid .grid-item:nth-child(20),
  .hex-grid .grid-item:nth-child(22),
  .hex-grid .grid-item:nth-child(24),
  .hex-grid .grid-item:nth-child(26),
  .hex-grid .grid-item:nth-child(28),
  .hex-grid .grid-item:nth-child(30) {
    margin-top: 14%;
  }
  .hex-grid .grid-item:nth-child(5),
  .hex-grid .grid-item:nth-child(9),
  .hex-grid .grid-item:nth-child(13),
  .hex-grid .grid-item:nth-child(17),
  .hex-grid .grid-item:nth-child(21),
  .hex-grid .grid-item:nth-child(25),
  .hex-grid .grid-item:nth-child(29) {
    clear: left;
  }
}
.hex-grid .grid-item .inner {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.hex-grid .grid-item .inner .inner-inner {
  -webkit-transform-style: preserve-3d;
  /* Chrome, Safari, Opera */
  transform-style: preserve-3d;
  visibility: visible;
  overflow: hidden;
  width: 100%;
  padding-bottom: 40%;
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
  background-repeat: no-repeat;
  background-size: 50%;
  -webkit-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
  background-position: 50%;
}
@media (min-width: 1100px) {
  .hex-grid .grid-item .inner .inner-inner {
    padding-bottom: 40%;
  }
}
.hex-grid .grid-item .inner .inner-inner:hover {
  background-size: 60%;
}
.hex-grid .grid-item .inner .inner-inner .grid-info {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10%;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  text-align: center;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.hex-grid .grid-item .inner .inner-inner .grid-info:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text {
  display: table;
  position: relative;
  height: 100%;
  width: 46%;
  left: 27%;
}
.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text .inner-text-inner {
  display: table-cell;
  vertical-align: middle;
}
.hex-grid .grid-item .inner .inner-inner {
  -webkit-backface-visibility: hidden;
}



.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger {
  /* 100ms will be applied between each sucessive enter operation */
     -moz-transition-delay: 0.1s !important;
  -webkit-transition-delay: 0.1s !important;
          transition-delay: 0.1s !important;

  /* this is here to avoid accidental CSS inheritance */
  -webkit-transition-duration: 0 !important;
          transition-duration: 0 !important;
}

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
     -moz-transition: 0.2s ease-in-out all;
  -webkit-transition: 0.2s ease-in-out all;
          transition: 0.2s ease-in-out all;
}

.repeat-animation.ng-leave.ng-leave-active,
.repeat-animation.ng-enter,
.repeat-animation.ng-move {
     -moz-transition: 0.2s ease-in-out all;
  -webkit-transition: 0.2s ease-in-out all;
          transition: 0.2s ease-in-out all;

  opacity:0;
}

.repeat-animation.ng-leave,
.repeat-animation.ng-move.ng-move-active,
.repeat-animation.ng-enter.ng-enter-active {
  opacity:1;
}



'use strict';
(function() {
  /**
   * Declares the app module.
   */
  angular
    .module( 'app', [ 'ngAnimate' ] );

//...