БЛОГ НА HUSL


Как сделать background косой в css?

Автор вопроса: Maksym Gapachilo

Вот на фото есть такая карточка , и как сделать мне такой синый цвет как на фото чуть косо?)введите сюда описание изображения


Источник

Ответы (5 шт):

Автор решения: Тимофей Белов

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

→ Ссылка
Автор решения: Ruslan Mart

Как вариант:

.container {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.container::after {
  background-color: blue;
  bottom: 0;
  content: '';
  left: 0;
  transform: rotate(-5deg);
  transform-origin: left bottom;
  position: absolute;
  right: -100%;
  top: 0;
}
→ Ссылка
Автор решения: CbIPoK2513

Вариант с transform: skew

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: #f0f2f1;
}

.card {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  background: #fff;
}

.card .top {
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.card .top::before {
  content: '';
  display: block;
  width: 100%;
  height: calc(100% + 50px); /* Чтоб не вылезал верхний угол */
  background: #3949ab;
  transform-origin: bottom left;
  transform: skewY(-5deg);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.card .top .-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1.5em .5em 2em;
  box-sizing: border-box;
  color: #fff;
  position: relative;
  z-index: 1;
}

.card .top .title {
  margin-bottom: .5em;
}

.card .top .price span {
  display: inline-block;
}

.card .top .price span:nth-child(1) {
  font-size: .75em;
  transform: translateY(-.75em);
}


.card .top .price span:nth-child(2) {
  align-self: flex-end;
  font-size: 1.75em;
}

.card .options {
  display: inline-flex;
  flex-direction: column;
  align-self: center;
  max-width: 100%;
  text-align: center;
  color: #aaa;
  padding: 1.5em .5em;
  box-sizing: border-box;
}

.card .options div {
  padding: 0 1em;
  box-sizing: border-box;
}

.card .options div:not(:last-child) {
  border-bottom: 1px solid #ddd;
  padding-bottom: .25em;
  margin-bottom: .5em;
}

.card .button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 .5em .5em;
  box-sizing: border-box;
}

.card .button div {
  border: 1px solid #222;
  padding: .5em 1em;
  box-sizing: border-box;
  box-shadow: 0 0 1px 0 #000;
}
<div class="card">
  <div class="top">
    <div class="-wrap">
      <div class="title">Free Trail</div>
      <div class="price">
        <span>$</span>
        <span>00</span>
        <span>per month</span>
      </div>
    </div>
  </div>
  <div class="options">
    <div>30 Free Trail</div>
    <div>5 Free Projects</div>
    <div>PHP 5 Enabled</div>
    <div>24/7 Suports</div>
  </div>
  <div class="button">
    <div>Order Now</div>
  </div>
</div>

Вариант с linear-gradient

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: #f0f2f1;
}

.card {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  background: #fff;
}

.card .top {
  display: block;
  width: 100%;
  background:
    linear-gradient(175deg, 
      #3949ab, 
      #3949ab calc(100% - 1.3em),
      transparent calc(100% - 1.25em));
  overflow: hidden;
  position: relative;
}

.card .top .-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1.5em .5em 2em;
  box-sizing: border-box;
  color: #fff;
  position: relative;
  z-index: 1;
}

.card .top .title {
  margin-bottom: .5em;
}

.card .top .price span {
  display: inline-block;
}

.card .top .price span:nth-child(1) {
  font-size: .75em;
  transform: translateY(-.75em);
}


.card .top .price span:nth-child(2) {
  align-self: flex-end;
  font-size: 1.75em;
}

.card .options {
  display: inline-flex;
  flex-direction: column;
  align-self: center;
  max-width: 100%;
  text-align: center;
  color: #aaa;
  padding: 1.5em .5em;
  box-sizing: border-box;
}

.card .options div {
  padding: 0 1em;
  box-sizing: border-box;
}

.card .options div:not(:last-child) {
  border-bottom: 1px solid #ddd;
  padding-bottom: .25em;
  margin-bottom: .5em;
}

.card .button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 .5em .5em;
  box-sizing: border-box;
}

.card .button div {
  border: 1px solid #222;
  padding: .5em 1em;
  box-sizing: border-box;
  box-shadow: 0 0 1px 0 #000;
}
<div class="card">
  <div class="top">
    <div class="-wrap">
      <div class="title">Free Trail</div>
      <div class="price">
        <span>$</span>
        <span>00</span>
        <span>per month</span>
      </div>
    </div>
  </div>
  <div class="options">
    <div>30 Free Trail</div>
    <div>5 Free Projects</div>
    <div>PHP 5 Enabled</div>
    <div>24/7 Suports</div>
  </div>
  <div class="button">
    <div>Order Now</div>
  </div>
</div>

→ Ссылка
Автор решения: NoSkill

Нижнюю часть блока можно сделать посредством SVG. Преимущество в том, что таким образом можно делать не только ровные диагональные переходы.

Если блок растянеться, то растянется и SVG, сохраняя визуальные отступы в блоке (попробуйте растянуть страницу, чтобы увидеть этот эфект).

Напротив, если угол нужно сохранять при растягивании контейнера, то достаточно просто убрать width/height у SVG.

#container {
  width: 50%;
  border: 1px solid red;
}

#container > div {
  padding: 20px;
  color: #ffffff;
  background-color: #3949ab;
}

#container > svg {
  display: block;
  width: 100%; height: 40px;
  fill: #3949ab;
}
<div id="container">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" preserveAspectRatio="none">
    <polygon points="0,0 100,0 0,20" />
  </svg>
</div>

→ Ссылка
Автор решения: Qwertiy

Используй псевдоэлемент с clip-path и отрицательным z-index:

div {
  width: 150px;
  margin: auto;
  border: 1px solid blue;
  position: relative;
  z-index: 0;
  color: red;
}

div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2em), 0 100%);
  background: silver;
  z-index: -1;
}
<div>
  Вот на фото есть такая карточка , и как сделать мне такой синый цвет как на фото чуть косо?)
  Вот на фото есть такая карточка , и как сделать мне такой синый цвет как на фото чуть косо?)
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.