Кастомный градиент поверх картинки

300

26 декабря 2018, 22:00

Как сделать такой угловой (белый) выступ на картинку? Я понимаю, что возможно придется прибегнуть к SVG-картинке

Answer 1

Вроде бы все пожелания учтены

смотреть на полный экран

Родительский блок в нём два потомка , в первом потомке картинка и кнопка внутри которой иконка youtube что бы можно было в дальнейшем повесить клик на открытие плеера, в другом потомке тестовый текст и псевдоэлемент с градиентом под углом ...

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  tet-decoration: none; 
} 
 
img { 
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 
 
.elem { 
  width: 1024px; 
  height: 320px; 
  margin: 30px auto; 
  display: flex; 
} 
 
.elem__block1 { 
  position: relative; 
  width: 60%; 
  height: 100%; 
} 
 
.elem__block1 img { 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 1; 
} 
 
.elem__block1 button { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 2; 
  width: 70px; 
  height: 50px; 
  border: none; 
  outline: none; 
  background: none; 
} 
 
.elem__block1 button .fa { 
  font-size: 50px; 
  color: red; 
} 
 
.elem__block2 { 
  padding: 30px 20px; 
  width: 40%; 
  position: relative; 
} 
 
.elem__block2 p { 
  font-size: 14px; 
} 
 
.elem__block2 li { 
  padding: 4px 0; 
} 
 
.elem__block2 h2 { 
  font-variant: small-caps; 
} 
 
.elem__block2 li span { 
  padding-left: 10px; 
  font-size: 18px; 
} 
 
.elem__block2 .fa { 
  text-align: left; 
} 
 
.elem__block2:after { 
  content: ""; 
  display: block; 
  width: 150px; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: -150px; 
  z-index: 13; 
  background: linear-gradient(110deg, transparent 50%, white 51%); 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
 
<div class="elem"> 
  <div class="elem__block1"> 
    <img src="https://transportcontainer.files.wordpress.com/2014/02/camion-container-22.jpg" alt=""> 
    <button><i class="fa fa-youtube"></i></button> 
  </div> 
  <div class="elem__block2"> 
    <h2>Lorem, ipsum. dollar </h2> 
    <p> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste, aliquam. 
    </p> 
    <ul> 
      <li> 
        <i class="fa fa-star"></i> 
        <span>Lorem, ipsum dolor. </span> 
      </li> 
      <li> 
        <i class="fa fa-mobile"></i> 
        <span>Lorem ipsum dolor sit. </span> 
      </li> 
      <li> 
        <i class="fa fa-grav"></i> 
        <span>Lorem, ipsum dolor. </span> 
      </li> 
      <li> 
        <i class="fa fa-window-restore"></i> 
        <span>Lorem ipsum dolor sit.</span> 
      </li> 
      <li> 
        <i class="fa fa-binoculars"></i> 
        <span>Lorem, ipsum dolor.</span> 
      </li> 
    </ul> 
  </div> 
</div>

Answer 2

Углы можно сделать и с помощю css. Создаем :after. И даем ему подходящий бордер.

.cont{ 
  width: 100%; 
  overflow: hidden; 
  height: 100%; 
} 
.cont{ 
  width: auto; 
  height: 180px; 
} 
.cont>img{ 
  width: 100%; 
  height: auto; 
} 
 
.cont:after{ 
  content: ''; 
  position: absolute; 
  top: 0; 
  right: 3px; 
  background: transparent; 
  border-top: 188px solid transparent; 
  border-right: 100px solid #FFFFFF; 
  border-bottom: 0 solid transparent; 
 
}

<div class="cont"> 
  <img src="https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg" /> 
</div>

Answer 3

UPD CSS multiple backgrounds (developer.mozilla.org):

div{
width:100%;
height:100vh;
background-color:#fff;
background: -webkit-linear-gradient(340deg,transparent 0,transparent 85%, #fff 85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
background: -o-linear-gradient(340deg,transparent 0,transparent 85%, #fff 85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
background: linear-gradient(110deg,transparent 0,transparent 85%, #fff 85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
background-repeat: repeat-x, no-repeat;
background-size: 100% 100%, cover;
}

@charset "UTF-8"; 
html { 
  margin: 0; 
  padding: 0; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  font-family: sans-serif; 
  font-size: 16px; 
  line-height: 1.15; 
} 
 
*, 
*:before, 
*:after { 
  margin: 0; 
  padding: 0; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  vertical-align: baseline; 
} 
html, 
body { 
  width: 100%; 
  min-height: 100vh; 
  margin: 0; 
  background-color: #fff; 
  color: #2e2e2e 
} 
 
div { 
  display:block; 
  width: 100%; 
  height: 100vh; 
  background-color: #fff; 
  background: -webkit-linear-gradient(340deg, transparent 0, transparent 85%, #fff 85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); 
  background: -o-linear-gradient(340deg, transparent 0, transparent 85%, #fff 85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); 
  background: linear-gradient(110deg, transparent 0, transparent 85%, #fff 85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); 
  background-repeat: repeat-x, no-repeat; 
  background-size: 100% 100%, cover; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
  <div> 
  </div> 
</body> 
</html>

(На скорую) Вариант с текстом:

@charset "UTF-8"; 
html { 
  margin: 0; 
  padding: 0; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  font-family: sans-serif; 
  font-size: 16px; 
  line-height: 1.15; 
  font-weight: 400; 
  font-style: normal; 
  -webkit-text-size-adjust: 100%; 
  -moz-text-size-adjust: 100%; 
  -ms-text-size-adjust: 100% 
} 
 
*, 
*:before, 
*:after { 
  margin: 0; 
  padding: 0; 
  -webkit-box-sizing: inherit; 
  -moz-box-sizing: inherit; 
  box-sizing: inherit; 
  font-stretch: normal; 
  vertical-align: baseline; 
} 
 
html, 
body { 
  width: 100%; 
  min-height: 100vh; 
  background-color: #fff; 
  color: #2e2e2e; 
} 
 
body { 
  margin: 0; 
  position: relative; 
  font-size: 1.25rem; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", Roboto, Helvetica, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizeLegibility; 
  font-variant-ligatures: common-ligatures; 
  font-feature-settings: "liga", "clig" 
} 
 
.rap { 
  position: relative; 
  width: 100%; 
  max-width: 1024px; 
  margin: 0 auto; 
  padding: 0; 
  height: 100vh; 
} 
 
.box { 
  display: block; 
  width: 100%; 
  height: 375px; 
} 
 
.img { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 600px; 
  background-color: #fff; 
  background: -webkit-linear-gradient(340deg, transparent 0, transparent 562px, #fff 563px, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); 
  background: -o-linear-gradient(340deg, transparent 0, transparent 562px, #fff 563px, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); 
  background: linear-gradient(110deg, transparent 0, transparent 562px, #fff 563px, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); 
  background-repeat: repeat-x, no-repeat; 
  background-size: 100% 375px, cover; 
} 
 
.txt { 
  position: absolute; 
  left: 600px; 
  top: 0; 
  display: block; 
  width: 424px; 
} 
 
.txt div { 
  position: relative; 
  margin: 0; 
  width: 100%; 
  max-width: 300px; 
  top: 50%; 
  left: 50%; 
  -webkit-transform: translate(-50%, -50%); 
  -ms-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%); 
  text-align: justify; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
 
<body> 
  <div class="rap clearfix"> 
    <div class="box img"> 
    </div> 
    <div class="box txt"> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      </div> 
    </div> 
  </div> 
</body> 
 
</html>

Answer 4

НАШЕЛ РЕШЕНИЕ!!! Делается через 3 div-a! Может и не верное / На костылях написано...

Создаем 3 дива в ряд, средний не прописываем width, а просто увеличиваем padding и в тот же момент пишем отрицательный margin и дальше переворачиваем блок с помощью transform: skew(-20deg);. Блок, который должен быть сзади углового элемента - можно добавить z-index: -1, чтобы элемент ушел на задний план, а тот элемент, что должен быть сверху - z-index: 1

.how_we_do { 
  display: flex; 
  flex-direction: row; 
  width: 100%; 
  height: 55%; 
} 
.how_we_do .how_we_do_left { 
  overflow: hidden; 
  width: 60%; 
  background: url("https://www.jonglaan.nl/.imaging/mte/jonglaan/og-image/dam/nieuws/europese-standaard-voor-tolheffing-in-transportsector.JPG/jcr:content/europese%20standaard%20voor%20tolheffing%20in%20transportsector.JPG") center center no-repeat; 
  background-size: cover; 
} 
.how_we_do .rotate { 
  position: relative; 
  padding: 150px; 
  margin: -150px; 
  background-color: white; 
  transform: skew(-20deg); 
} 
.how_we_do .how_we_do_right { 
  z-index: 1; 
  width: 30%; 
  padding-top: 2%; 
  margin-right: 10%; 
} 
.how_we_do .how_we_do_right h1 { 
  font-size: 40px; 
  font-weight: 600; 
} 
.how_we_do .how_we_do_right h2 { 
  font-size: 16px; 
  font-weight: 400; 
  color: #444; 
  margin-bottom: 5%; 
  line-height: 27px; 
} 
.how_we_do .how_we_do_right h3 { 
  color: #444; 
  font-size: 24px; 
  font-weight: 600; 
  margin-bottom: 3%; 
} 
.how_we_do .how_we_do_right h3 .icon_col { 
  color: #23B684; 
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> 
 
<div class="how_we_do"> 
    <div class="how_we_do_left"> 
<!--        <img src="https://www.jonglaan.nl/.imaging/mte/jonglaan/og-image/dam/nieuws/europese-standaard-voor-tolheffing-in-transportsector.JPG/jcr:content/europese%20standaard%20voor%20tolheffing%20in%20transportsector.JPG" alt="">--> 
    </div> 
    <div class="rotate"> 
    </div> 
        <div class="how_we_do_right"> 
            <h1>Как мы работаем?</h1> 
            <h2>Ut enim ad minima veniam, quis nostrum exercitationem 
                ulla corporis suscipit laboriosam, nisi ut aliquid ex ea.</h2> 
 
            <h3><i class="fas fa-taxi icon_col" aria-hidden="true"></i>  Грузоперевозки по всей России</h3> 
            <h3><i class="fas fa-shield-alt icon_col"></i>  Быстрые и безопасные грузоперевозки</h3> 
            <h3><i class="fas fa-money-bill-wave icon_col"></i>  Самые низкие ставки</h3> 
            <h3><i class="fas fa-space-shuttle icon_col"></i>  Логистика и Доставка</h3> 
            <h3><i class="fas fa-truck icon_col" aria-hidden="true"></i>  Упаковка и Хранение</h3> 
 
        </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему меняются классы в yandex-maps-api?

Застилил balloon через классыymaps-2-1-65- но через некоторое время они изменились на класс

175

javascript

Как выставить что то на подобии 'strict mode' в geocode componentRestriction countries

Если я ввожу в поле например "New York"Оно мне возвращает в результатах какое то непонятно найденное место в Италии ("Via Pisa, 250, 20099 Sesto San Giovanni MI, Italy")

164

javascript

Цикл не корректно работает. JS

294

javascript

check for mutations to original array/list

Решал различные задачки с помощью JavaScript'aИ споткнулся на такой: Цель, удалить минимальное значение из массива, при том, что расположение элементов...

173