当前位置: 首页 > 面试题库 >

5张图像用对角线对称分隔

张敏达
2023-03-14
问题内容

我在互联网上浏览,偶然发现了Reddit上的这个主题

看到这个可爱的横幅之后。我想尝试使用我选择的五张对称图像来模拟这样的事情,这些图像由对角线分隔,
就像上面的图片一样。也许还尝试在分类图像的顶部添加一些文本。像这样:

我尝试使用猫图片在CSS中类似地在线重写某些内容

.image-container {
  width: 90%;
  height: 200px;
  position: relative;
  margin: 30px auto;
  background: black;
  overflow: hidden;
}


.image-one {
  right: 20%;
}
.image-two {
  right: 20%;
}
.image-three {
  right: 20%;
}
.image-four {
  right: 20%;
}
.image-five {
  right: 20%;
}


.image-one,
.image-two,
.image-three,
.image-four,
.image-five {
  position: absolute;
  height: 100%;
  width: 40%;
  min-width: 20px;
  -ms-transform: skewX(-25deg);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  background: white;
  overflow: hidden;
 top:0;
  margin-right: 50px;
  border: 5px solid black;
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.9);
}

.image-one:after, .image-two:after,
.image-three:after, .image-four:after,
.image-five:after{
  -ms-transform: skewX(25deg);
  -webkit-transform: skewX(25deg);
  transform: skewX(25deg);
  position: absolute;
  width: 120%;
  height: 100%;
  display: block;
  top: 0;
  content: "";
}

.image-one:after{
  right: -93px;
  background: url("http://lorempixel.com/500/400/cats") no-repeat center center;
  background-size: cover;
}
.image-two:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
  background-size: cover;
}
.image-three:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
  background-size: cover;
}
.image-four:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
  background-size: cover;
}
.image-five:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
      background-size: cover;
}

但是,并非所有的猫图片都在盒子内,也不是均匀分布的

<div class='image-container'>
  <div class='image-left'></div>
  <div class='image-right'></div>
</div>


<div class='image-container'>
  <div class='image-one'></div>
    <div class='image-two'></div>
        <div class='image-three'></div>
            <div class='image-four'></div>
                <div class='image-five'></div>
</div>

问题答案:

无需使用定位元素,您可以像这样简化并用于background-position使元素居中:

.container {

  display: flex;

  height: 150px;

  margin: 0 30px;

}



.box {

  flex: 1;

  border: 1px solid;

  transform: skew(-25deg);

  position: relative;

  overflow: hidden;

}



.box:after {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: -50%;

  right: -50%;

  transform: skew(25deg);

  background-image: var(--i);

  background-position: center;

}


<div class="container">

  <div class="box" style="--i:url(https://lorempixel.com/400/200/)"></div>

  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>

  <div class="box" style="--i:url(https://lorempixel.com/300/200/)"></div>

  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>

  <div class="box" style="--i:url(https://lorempixel.com/200/300/)"></div>

</div>

UPDATE

Here is another version of the code which is more supported (especially for
IE):

.container {

  font-size:0;

  height: 150px;

  margin: 0 30px;

}



.box {

  font-size:initial;

  width:calc(100% / 5);

  height:100%;

  border: 1px solid;

  box-sizing:border-box;

  transform: skew(-25deg);

  position: relative;

  overflow: hidden;

  display:inline-block;

}



.box span {

  position: absolute;

  top: 0;

  bottom: 0;

  left: -50%;

  right: -50%;

  transform: skew(25deg);

  background-position: center;

  background-size:cover;

}


<div class="container">

  <div class="box">

    <span style="background-image:url(https://lorempixel.com/400/200/)"></span>

  </div>

  <div class="box">

    <span style="background-image:url(https://lorempixel.com/400/300/)"></span>

  </div>

  <div class="box">

    <span style="background-image:url(https://lorempixel.com/200/200/)"></span>

  </div>

  <div class="box">

      <span style="background-image:url(https://lorempixel.com/300/200/)"></span>

  </div>

  <div class="box">

     <span style="background-image:url(https://lorempixel.com/400/400/)"></span>

  </div>

</div>


 类似资料:
  • 我试图创建一个Android应用程序,它可以动态加密数据并将其写入存储。已经实现了没有加密的应用程序,在stackoverflow上查看了100个加密示例/帖子,但无法决定使用哪种方法。 一开始想到使用AES,就在谷歌上搜索它的安全性。每次输入16或32个字符(我希望安全性更好)的密码似乎并不方便。作为一种替代的非对称加密方式,人们想到了。用一个密钥加密,用另一个密钥解密,这样我就可以将用于加密的

  • 按照完全对称的图案,绘制您的画笔描边。对称模式允许您定义一个或多个轴,并允许您随后从圆形、径向、螺线和曼陀罗这些预设类型中进行选择。 在绘制时选择对称选项 使用对称模式可轻松创建复杂的图案 Photoshop 允许您在使用“画笔”、“混合器画笔”、“铅笔”及“橡皮擦”工具时绘制对称图形。在使用这些工具时,单击选项栏中的蝴蝶图标。从以下几种可用的对称类型中选择:垂直、水平、双轴、对角线、波形、圆形、

  • 问题内容: numpy中有什么方法可以获取对角线数组的引用?我希望将阵列对角线除以某个因子,谢谢 问题答案: 如果是您的数组并且是因素, 参见Numpy手册。

  • 我试着让两个div相邻,它们之间有一个对角线空间。我在stackoverflow上看到过多个关于对角线div的教程,但它们都是通过为带有纯色的div使用两个边框并使用它们创建的对角线来实现的。但我想要图片/背景图像,而不是纯色。甚至可能还有其他内容,比如在对角线下的文本。当使用边框时,这是不可能的,因为边框在div之外。(floatright隐藏溢出或其他内容。) 这里有人能给我一个提示如何实现这

  • 我使用的是Angular 5。我有一个要求,需要在页面上上传图像并显示图像? 是否有任何角度5标签或html标签我可以这样做? 我附上它看起来像一个屏幕截图。用户点击“上传”按钮,应该有一个弹出窗口,用户选择要上传的文件。选择要上传的文件并点击打开按钮后。图像将出现在页面上? 任何提示或建议将不胜感激!

  • 可能聪明的你已经发现了魔方矩阵各行或列数字相加后的奇妙属性,无论是各行相加,还是各列相加,还是两条对角线的数字相加,都得到同一个结果。下面让我们用MATLAB来证实这一结论。首先试着输入 sum(A) MATLAB显示 ans = 34 34 34 34 如果你没有指定变量,MATLAB就会用变量ans(answer的缩写),来储存计算的结果。这里显示的是一个行