3

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

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

1

4 ответа 4

3

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

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

Родительский блок в нём два потомка , в первом потомке картинка и кнопка внутри которой иконка 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>

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>

1

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>

1
  • В Firefox у обоих вариантов граница мыльная
    – andreymal
    13 сен 2018 в 19:23
0

НАШЕЛ РЕШЕНИЕ!!! Делается через 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>

2
  • я вроде бы уже сделал так .... чем не устроило ? 14 сен 2018 в 0:19
  • @НикитаФаст Код не объяснил 14 сен 2018 в 0:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.