消除分类多个倾斜图像的末端 [英] Unskewing the ends of an assortment multiple skewed images

查看：114
本文介绍了消除分类多个倾斜图像的末端的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

之前我问过这个



CSS 

  .container {
 font-size：0; 
 height：215px; 
 margin：30px 50px; 
 text-align：center; 
颜色：黑色; 
} 
 .box1 {
 font-size：initial; 
 width：calc（100％/ 6）; 
身高：100％; 
 border：3px solid; 
 box-sizing：border-box; 
 transform：skew（-25deg）; 
职位：亲属; 
 overflow：hidden; 
 display：inline-block; 
} 
 .box2 {
 font-size：initial; 
 width：calc（100％/ 6）; 
身高：100％; 
 border：2.5px solid; 
 box-sizing：border-box; 
 transform：skew（-25deg）; 
职位：亲属; 
 overflow：hidden; 
 display：inline-block; 
} 
 .box3 {
 font-size：initial; 
 width：calc（100％/ 6）; 
身高：100％; 
 border：2.5px solid; 
 box-sizing：border-box; 
 transform：skew（-25deg）; 
职位：亲属; 
 overflow：hidden; 
 display：inline-block; 
} 
 .box4 {
 font-size：initial; 
 width：calc（100％/ 6）; 
身高：100％; 
 border：2.5px solid; 
 box-sizing：border-box; 
 transform：skew（-25deg）; 
职位：亲属; 
 overflow：hidden; 
 display：inline-block; 
} 
 .box5 {
 font-size：initial; 
 width：calc（100％/ 6）; 
身高：100％; 
 border：2.5px solid; 
 box-sizing：border-box; 
 transform：skew（-25deg）; 
职位：亲属; 
 overflow：hidden; 
 display：inline-block; 
} 
 .box6 {
 font-size：initial; 
 width：calc（100％/ 6）; 
身高：100％; 
 border：2.5px solid; 
 box-sizing：border-box; 
 transform：skew（-25deg）; 
职位：亲属; 
 overflow：hidden; 
 display：inline-block; 
} 
 
 
 .box1 span {
 position：absolute; 
 top：0; 
 bottom：0;剩余
：-100％; 
右：-100％; 
 transform：skew（25deg）; 
 background-position：center; 
 background-size：cover; 
} 
 .box2 span {
 position：absolute; 
 top：0; 
 bottom：0; 
剩下：-50％; 
右：-50％; 
 transform：skew（25deg）; 
 background-position：center; 
 background-size：cover; 
} 
 .box3 span {
 position：absolute; 
 top：0; 
 bottom：0; 
剩下：-50％; 
右：-50％; 
 transform：skew（25deg）; 
 background-position：center; 
 background-size：cover; 
} 
 .box4 span {
 position：absolute; 
 top：0; 
 bottom：0;还剩
：-35％; 
右：-35％; 
 transform：skew（25deg）; 
 background-position：center; 
 background-size：cover; 
} 
 .box5 span {
 position：absolute; 
 top：0; 
 bottom：0; 
剩下：-50％; 
右：-50％; 
 transform：skew（25deg）; 
 background-position：center; 
 background-size：cover; 
} 
 .box6 span {
 position：absolute; 
 top：0; 
 bottom：0;还剩
：-35％; 
右：-35％; 
 transform：skew（25deg）; 
 background-position：center; 
 background-size：cover; 
}

HTML $ b 

 < div class =container> 
< div class =box1>< span style =background-image：url（illustris1.png）>< / span>< / div> 
< div class =box2>< span style =background-image：url（gal.png）>< / span>< / div> 
< div class =box3>< span style =background-image：url（laniakea.jpg）>< / span> < / DIV> 
< div class =box4>< span style =background-image：url（globularstar.jpg）>< / span>< / div> 
< div class =box5>< span style =background-image：url（elliptical.jpg）>< / span>< / div> 
< div class =box6>< span style =background-image：url（illustris2.png）>< / span>< / div> 
< div class =container mid>< / div> 
< / div>

尽管我的代码片断比其他线程的答案冗长，但它允许我调整我输入的每张图片的大小。



现在我想要做的是让最左端 box1 ，最右端<$这个容器环境中的c $ c> box6 只会在这个分类的内部部分倾斜。这有点像这张海报想要得到的结果：只偏斜一侧元素。



我已经尝试了几个小时的几种方法，而且我似乎没有改变 box1 和 box6 让一边偏斜而不扭曲图像。 >解决方案

您可以对最后一个和第一个使用负边距来隐藏一半元素：

lang =jsdata-hide =falsedata-console =truedata-babel =false> 

  .container {display：flex; height：150px; margin：0 30px; overflow：hidden;}。box {flex：1; border：1px solid;变形：歪斜（-25deg）;位置：相对; （（100％/ 5）/ -2）;}。box：last-child {margin-right：calc（（100％/ 5）/ -2）;}。box：after {content：;位置：绝对; top：0;底部：0;剩下：-50％;右：-50％;变形：倾斜（25deg）; background-image：var（ -  i）; < div class =>< div class = 容器 > < div class =boxstyle =--i：url（https://lorempixel.com/400/200/）>< / div> < div class =boxstyle =--i：url（https://lorempixel.com/400/300/）>< / div> < div class =boxstyle =--i：url（https://lorempixel.com/300/200/）>< / div> < div class =boxstyle =--i：url（https://lorempixel.com/400/300/）>< / div> < div class =boxstyle =--i：url（https://lorempixel.com/200/300/）>< / div>< / div>


I asked this question earlier asking how to skew an assortment of images. I was able to get very satisfying results

CSS

.container {
    font-size:0;
    height:215px;
    margin: 30px 50px;
    text-align: center;
    color: black;
}
.box1 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 3px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box2 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box3 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box4 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box5 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}
.box6 {
  font-size:initial;
  width:calc(100% / 6);
  height:100%;
  border: 2.5px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}


.box1 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: -100%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box2 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box3 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box4 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  right: -35%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box5 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}
.box6 span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  right: -35%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}

HTML

<div class="container">
  <div class="box1"><span style="background-image:url(illustris1.png)"></span></div>
  <div class="box2"><span style="background-image:url(gal.png)"></span></div>
  <div class="box3"><span style="background-image:url(laniakea.jpg)"></span>  </div>
  <div class="box4"><span style="background-image:url(globularstar.jpg)"></span></div>
  <div class="box5"><span style="background-image:url(elliptical.jpg)"></span></div>
  <div class="box6"><span style="background-image:url(illustris2.png)"></span></div>
  <div class="container mid"></div>
</div>

While my this snipped of code is lengthy compared to the answered one from the other thread, it allows me to resize for each picture I input.

What I am trying to do now is to have the far left end box1 and the far right end box6 of this container environment to skewed only in the inner portion of this assortment. It is kind of like the result this poster is wanting to get: Skew one side only of an element.

I have been attempting several methods of this for a couple hours and I do not to seem to have luck altering box1 and box6 To have one side skewed while not warping the images.

解决方案

You can use negative margin for last and first one to hide half the element:

.container {
  display: flex;
  height: 150px;
  margin: 0 30px;
  overflow:hidden;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}
.box:first-child {
  margin-left:calc((100% / 5) / -2);
}
.box:last-child {
  margin-right:calc((100% / 5) / -2);
}

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

这篇关于消除分类多个倾斜图像的末端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆