0

Появилась следующая проблема: требуется сделать такую конструкцию ( рисунок приложен ), а я не могу понять, как это можно сделать. Помогите, пожалуйста.

введите сюда описание изображения

UPD: Возможно, не совсем правильно изложил суть вопроса. На рисунке показан не градиент, а два разных блока, между которыми имеется расстояние

2

2 ответа 2

2

Можно с помощью linear-gradient:

div {
  width: 300px;
  height: 200px;
  border: 1px solid red;
  background: linear-gradient(65deg, blue 35%, white 0, white 50%, grey 0);
}
<div>

</div>

1

Есть вариант решения с использованием skewX

.skew {
  padding: 20px;
  margin: 0 5px;
  width: 100px;
  color: white;
  background-color: #F48024;
  -webkit-transform: skewX(15deg); 
  -moz-transform: skewX(15deg); 
  -ms-transform: skewX(15deg); 
  -o-transform: skewX(15deg); 
  transform: skewX(15deg); 
}

.container {
  display: flex;
}
<div class="container">
  <div class="skew"></div>
  <div class="skew"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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