Наклоните div с помощью чистого CSS и позвольте изображению заполнить перекошенную область

У меня есть небольшая Проблема. Я пытаюсь сделать структуру из изображения. У меня есть 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>

введите здесь описание изображения

Но результат из этого изображениявведите здесь описание изображения

Как я могу получить результат из первого изображения. Левое и правое изображения имеют прямой край.


css skew
person Tatar Jony    schedule 26.07.2018    source источник
comment
возможный дубликат: stackoverflow.com/questions/49289529/   -  person Temani Afif    schedule 26.07.2018
comment
в моем примере это не фоновое изображение, а обычная ссылка на изображение   -  person Tatar Jony    schedule 26.07.2018
comment
Я знаю, я дал вам возможный дубликат, чтобы иметь некоторые идеи;)   -  person Temani Afif    schedule 26.07.2018

Ответы (1)


arrow_upward
2
arrow_downward

По сути, вы можете исказить ссылки, а затем восстановить img. overflow:hidden нужно будет использовать, чтобы покрыть весь экран/ссылку.

пример

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 также может помочь убедиться, что изображение заполняет все ссылка на сайт. он будет обрезан.

Для текста его можно добавить рядом с img. и центрируется через flex. ручка для игры: https://codepen.io/gc-nomade/pen/vaJzaM

если вы хотите использовать фоновое изображение и ссылку поверх него, вы можете вдохновиться из https://codepen.io/gc-nomade/pen/vGvRPZ/ (превратить заголовки в ссылки)

Оба примера искажают контейнер, а затем применяют противоположное значение наклона, чтобы восстановить содержимое.

Прямые края создаются за счет того, что содержимое выходит за пределы, но скрываются внешние края.

person G-Cyrillus    schedule 26.07.2018
comment
Спасибо, это то, что мне нужно. Проблема была только с изображениями. Текст для меня не проблема :). - person Tatar Jony; 26.07.2018