Фон под углом

@rav41k · Регистрация: 11.01.2016

Author24 — интернет-сервис помощи студентам

Скажите как лучше делать такие косые фоны?

@mrtoxas · 03.05.2017, 02:03

Можно так:

HTML5

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .wrapper {
      width: 700px;
      margin: 0 auto;
    }
    
    section {
      margin-top: 50px;
      position: relative;
      padding: 30px 20px;
      box-sizing: border-box;
    }
    
    section:before,
    section:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    
    section:before {
      background-color: lightblue;
      transform: rotate(5deg) skew(5deg);
    }
    
    section:after {
      background-color: CornflowerBlue;
      transform: rotate(4.5deg) skew(4.5deg) translate(1px, 4px);
    }
  </style>
</head>
 
<body>
  <div class="wrapper">
    <section class="blue">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus libero unde harum, ab, rerum suscipit repellendus quas, dolorum sequi animi, facere. Rerum aut ab sint tenetur mollitia dignissimos, ad commodi.
    </section>
  </div>
 
</body>
 
</html>

Можно при помощи SVG сделать.

@rav41k 0 / 0 / 0 Регистрация: 11.01.2016 Сообщений: 39
		1
	Фон под углом 02.05.2017, 22:01. Показов 4500. Ответов 1 Метки нет (Все метки) Скажите как лучше делать такие косые фоны? 0

	03.05.2017, 02:03

Фон под углом

Решение