CSS диагональный фон div

Для веб-сайта, который я разрабатываю, мне нужно включить некоторые диагональные границы в div. Это основные примеры, которые мне нужно воссоздать.

двойная диагональная верхняя граница в форме треугольника

Теперь я искал в Интернете, как этого добиться, и моей первой мыслью было бы использовать ::before. Однако я не могу заставить его работать без абсолютного позиционирования, что портит всю страницу.

Это мой код, который я пытался добиться примерно так:

.slider-container{
  background-color: $blue;
  width: 100%;
  overflow: hidden;
  position: relative;
  .col-md-3{
    img{
      padding: 40px;
      width: 100%;
      max-width: 400px;
      margin: auto;
    }
  }
  &::before {
    background: red;
    bottom: 100%;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    transform-origin: 100% 100%;
    transform: rotate(-15deg);
    width: 150%;
  }
}
<section id="slider">
    <div class="container-fluid">
        <div class="row slider-container">
            <div class="col-md-3">
                <p>imgae 1</p>
            </div>
            <div class="col-md-3">
                <p>imgae 2</p>
            </div>
            <div class="col-md-3">
                <p>imgae 3</p>
            </div>
            <div class="col-md-3">
                <p>imgae 4</p>
            </div>
        </div>
    </div>
</section>

Примечание: здесь это не сработает, но вот результат, который я получаю result


html css diagonal
person Gurbii    schedule 03.05.2017    source источник
comment
Можете ли вы опубликовать html и css того, что вы пробовали?   -  person ajinkya narkar    schedule 03.05.2017
comment
Возможный дубликат Shape с наклонной стороной (отзывчивый)   -  person jbutler483    schedule 03.05.2017
comment
Попробуйте реализовать свойство перекоса преобразования, например transform: skew(0deg,5deg);   -  person Nikhil Nanjappa    schedule 03.05.2017
comment
я обновлю вопрос своим кодом, который у меня есть сейчас   -  person Gurbii    schedule 03.05.2017

Ответы (6)


arrow_upward
6
arrow_downward

С помощью только css и небольшой настройки в зависимости от размера вашего div вы можете создать что-то вроде этого:

.myclass {
width: 100px;
height: 100px;
background: linear-gradient(45deg, black 0%, black 26%, transparent 26%), linear-gradient(-45deg, black 0%, black 27%, transparent 27%)
}

.myclass2 {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, blue 0%, blue 27%, transparent 27%), linear-gradient(45deg, blue 0%, blue 26%, red 26%)
}
With transparency:
<div class="myclass">My content here</div>
<br/>
Not as easy with transparent:
<div class="myclass2">My content here</div>

Изменить: только что проверил это в хроме, вам могут понадобиться специальные линейные градиенты для старых/других браузеров.

person Morfium    schedule 03.05.2017
comment
Неважно, повозился с высотой и некоторыми другими свойствами, и это то, что я ищу, спасибо! - person Gurbii; 03.05.2017
comment
Я предлагаю использовать нижний левый и нижний правый для линейных градиентов вместо угла. Таким образом, он отрегулирует диагональ (?) до высоты контейнера. - person MiK; 17.10.2019

arrow_upward
4
arrow_downward

Вероятно, самым простым способом добиться этого было бы использование фонового изображения, хотя эффект может оказаться непоследовательным на небольших устройствах. По этой причине вы можете рассмотреть возможность использования резкого градиента.

.grad {
  background: lightblue; /* For browsers that don't support gradients */
  background: -webkit-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: -o-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: -moz-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  width: 100%;
  padding: 20px;
}
<div class="grad">
  <h1>Hard-stop gradient</h1>
  <p>Using this type of gradient, you can create an angled background without using a background image.</p>
</div>

Используя это, вы можете создать градиент от 0% до 15%, который будет белым на обоих концах, а затем градиент от 15% до 100%, который будет полностью черным. Это полностью удаляет эффект затухания, давая вам фон под углом. Это, вероятно, самый эффективный способ, так как он требует только одну строку CSS.

person natejms    schedule 03.05.2017

arrow_upward
1
arrow_downward

Что-то вроде этого?

div {
  background: yellow;
  height: 150px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

div::before {
  background: red;
  bottom: 100%;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  transform-origin: 100% 100%;
  transform: rotate(-15deg);
  width: 150%;
}
<div></div>

person Sam    schedule 03.05.2017
comment
действительно что-то вроде этого, однако, когда этот div следует за другим, он не будет обрезан сверху, как в вашем примере, потому что он находится за пределами области просмотра. - person Gurbii; 03.05.2017

arrow_upward
1
arrow_downward

Для меня linear-gradient не гладкий... Я бы предложил либо clip-path, либо svg:

svg {
  display: block;
  width: 100%;
  height: 55px;      
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
  <polygon points="100 0 100 10 0 10" fill="white" />
</svg>
person Ricky Levi    schedule 20.11.2020

arrow_upward
1
arrow_downward

Вы можете использовать clip-path.

body {
  margin: 0;
  padding: 0;

  color: #ffffff;
}

.wrapper {
  min-height: 100vh;
  min-width: 100vw;
  max-width: 100vw;
  width: 100vw;
  background-color: red;
}

.bg {
  min-height: 100vh;
  min-width: 100vw;
  background-color: blue;
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 50% 100%);
}
<div class="wrapper">
  <div class="bg"></div>
</div>

person İlknur Ültanır    schedule 19.04.2021

arrow_upward

arrow_downward

person    schedule
comment
Я видел этот ответ на аналогичный вопрос, однако он, кажется, сосредоточен только на диагональном боковом div, а не на div, который имеет такие треугольники с обеих сторон. тоже не могу до конца разобраться - person Gurbii; 03.05.2017
comment
дает мне странную форму с нижней границей слева от моего div? - person Gurbii; 03.05.2017