Как в CSS сверстать неровную фигуру?

374

17 января 2017, 22:52

Нужно сверстать вот такую фигуру, но не знаю как правильно это сделать. Делал квадрат и через before добавлял обрезанный border, но на разных разрешениях экранов он как будто "отклеивался".

Answer 1

Первый вариант с градиентом:

div { 
  width: 500px; 
  padding-bottom: 40%; 
  max-width: 100%; 
  background: #000; 
  margin: 30px auto; 
  border-top: 2px solid #000; 
 
  background: linear-gradient(105deg,  #000 0%, #000 25%, #ae0000 25%, #ae0000 100%); 
 
}

<div></div>

И более объемный с :before

div { 
  position: relative; 
  width: 500px; 
  padding-bottom: 40%; 
  max-width: 100%; 
  background: #ae0000; 
  margin: 30px auto; 
  border-top: 2px solid #000; 
  overflow: hidden; 
} 
div:before { 
  content: ''; 
  position: absolute; 
  background: #000; 
  width: 100%; 
  height: 100%; 
  right: 50%; 
  transform: rotate(-80deg); 
  -webkit-transform: rotate(-80deg); 
  -moz-transform: rotate(-80deg); 
  -o-transform: rotate(-80deg); 
  -ms-transform: rotate(-80deg); 
}

<div></div>

И вариант с SVG фоном:

div { 
  width: 500px; 
  padding-bottom: 40%; 
  max-width: 100%; 
  margin: 30px auto; 
  border-top: 2px solid #000; 
 
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660.0001 364.457"><polygon points="186.836 0 179.333 0 132.143 364.457 660 364.457 660 0 186.836 0" fill="#ae1a17"/><polygon points="0 0 0 364.457 132.143 364.457 179.333 0 0 0"/></svg>') no-repeat center / cover; 
   
}

<div></div>

Answer 2

Решение через градиент:

body { 
  margin: 0; 
} 
 
.with-gradient { 
  background: linear-gradient(100deg, #000 30%, #ac0000 30%); 
   
  /* Про для демонстрации */ 
  width: 100vw; 
  height: 100vh; 
}

<div class="with-gradient"> 
</div>

Answer 3

Если отвлечься от конкретного применения, где, по всей видимости, решение при помощи градиента является достаточным, такие фигуры можно верстать при помощи clip-path.

.megablock { 
  display: flex; 
} 
 
.block { 
  height: 400px; 
  flex-grow: 1; 
} 
.block--black { 
  background-image: linear-gradient(#000, #999); 
  clip-path: url(#polygon-1); 
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%); 
} 
 
.block--color { 
  background-image: linear-gradient(rgba(0, 192, 255, 0.8), #ff9); 
  clip-path: url(#polygon-2); 
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%); 
}

<div class="megablock"> 
  <div class="block block--black"></div> 
  <div class="block block--color"></div> 
</div> 
 
<svg class="clip"> 
  <defs> 
    <clipPath id="polygon-1" clipPathUnits="objectBoundingBox" > 
      <polygon points="0 0, 0.8 0, 1 1, 0 1" /> 
    </clipPath> 
     
    <clipPath id="polygon-2" clipPathUnits="objectBoundingBox" > 
      <polygon points="0 0, 1 0, 1 1, 0.2 1" /> 
    </clipPath> 
  </defs> 
</svg>