用纯 CSS 倾斜 div 并允许图像填充倾斜区域
Skew div with pure CSS and allow image to fill skewed area
我有一个小问题。我正在尝试根据图像制作结构。我有 CSS 和 HTML
.mask-skew {
transform: skewX(-10deg);
/*width: 300px;*/
height: 390px;
overflow: hidden;
margin: 5px;
/*border: 2px solid orange;*/
}
.art-skew {
transform: skewX(10deg);
position: relative;
left: -50%;
}
<div class="row flex--row advertising-row">
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/BarbourSS18Banner_1140x392px.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/TeaserWellensteynKopie.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/template_teaser_images_fjallraven.jpg" alt="">
</div>
</div>
但是结果是这张图片
如何从第一张图片中获取结果。左右图有直边
基本上,您可以先倾斜 links 然后再倾斜 img。
overflow:hidden 需要用来覆盖整个 screen/link.
例子
body {margin:0;}
div {
overflow:hidden;
}
nav {
display:flex;
height:100vh;
margin:0 -10vw
}
nav a {
flex:1;
height:100%;
transform:skew(-15deg);
overflow:hidden;
}
nav a + a {
margin-left:3vh;
}
nav a img {
width:140%;
height:100%;
display:block;
/* optionnal */
/*object-fit: cover;
object-position:center center;*/
transform:skew(15deg);
margin:0 -20%; /* in relation with width */
}
<div>
<nav>
<a href=""><img src="http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg"></a>
<a href=""><img src="https://images.wallpaperscraft.com/image/pool_skyscraper_hotel_124522_1600x1200.jpg"></a>
<a href=""><img src="https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg"></a>
</nav>
</div>
object-fit
还可以帮助确保图像填满整个 link。它将被剪裁。
文字的话,可以在img旁边加上。并通过 flex 居中。可以玩的笔:https://codepen.io/gc-nomade/pen/vaJzaM
如果你想在上面使用background-image和一个link,你可以从https://codepen.io/gc-nomade/pen/vGvRPZ/中得到启发(把标题变成link)
两个示例都倾斜容器,然后应用相反的倾斜值来取消倾斜内容。
直边是让内容溢出而隐藏在外边。
我有一个小问题。我正在尝试根据图像制作结构。我有 CSS 和 HTML
.mask-skew {
transform: skewX(-10deg);
/*width: 300px;*/
height: 390px;
overflow: hidden;
margin: 5px;
/*border: 2px solid orange;*/
}
.art-skew {
transform: skewX(10deg);
position: relative;
left: -50%;
}
<div class="row flex--row advertising-row">
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/BarbourSS18Banner_1140x392px.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/TeaserWellensteynKopie.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-4 mask-skew">
<img class="art-skew" src="templates/Stordeur/themes/stordeur/images/template_teaser_images_fjallraven.jpg" alt="">
</div>
</div>
但是结果是这张图片
如何从第一张图片中获取结果。左右图有直边
基本上,您可以先倾斜 links 然后再倾斜 img。 overflow:hidden 需要用来覆盖整个 screen/link.
例子
body {margin:0;}
div {
overflow:hidden;
}
nav {
display:flex;
height:100vh;
margin:0 -10vw
}
nav a {
flex:1;
height:100%;
transform:skew(-15deg);
overflow:hidden;
}
nav a + a {
margin-left:3vh;
}
nav a img {
width:140%;
height:100%;
display:block;
/* optionnal */
/*object-fit: cover;
object-position:center center;*/
transform:skew(15deg);
margin:0 -20%; /* in relation with width */
}
<div>
<nav>
<a href=""><img src="http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg"></a>
<a href=""><img src="https://images.wallpaperscraft.com/image/pool_skyscraper_hotel_124522_1600x1200.jpg"></a>
<a href=""><img src="https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg"></a>
</nav>
</div>
object-fit
还可以帮助确保图像填满整个 link。它将被剪裁。
文字的话,可以在img旁边加上。并通过 flex 居中。可以玩的笔:https://codepen.io/gc-nomade/pen/vaJzaM
如果你想在上面使用background-image和一个link,你可以从https://codepen.io/gc-nomade/pen/vGvRPZ/中得到启发(把标题变成link)
两个示例都倾斜容器,然后应用相反的倾斜值来取消倾斜内容。
直边是让内容溢出而隐藏在外边。