6

Как сверстать то что на картинке?

Пример

2 ответа 2

7

Мы все учились по немногу когда-нибудь и как-нибудь

В общем по шагам :

1) создаём обёртку которая будет скрывать не нужные части.

2) создаём блок со свойством transform:skew(-25deg).

3) rgba позволяет сделать фон который имеет прозрачность в отчие от hex.

и на выходе получаем это :

.blocks {
  width: 140px;
  height: 40px;
  overflow: hidden;
}

.block {
  width: 150px;
  height: 40px;
  background: rgba(48, 87, 123, .9);
  transform: skew(25deg)translate(-20px, 0);
}
<div class="blocks">
  <div class="block"></div>
</div>

3
  • 1
    Хороший ответ, как я про skew забыл.. Мой пример уж точно на костылях "хороших"))
    – Arthur
    10 апр 2018 в 18:39
  • 1
    бывает -- на skew вообще много вкусного делается
    – user33274
    10 апр 2018 в 18:40
  • Так и знал, что что-то упущу))
    – Arthur
    10 апр 2018 в 18:43
1

Если не нужно поддерживать IE лучше сделать через clip-path:

.test{
  width: 200px;
  height: 50px;
  background: red;
  clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 100%, 0 100px);
}
<div class="test"></div>

Ваш ответ

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

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