0

Есть фигура в дизайне введите сюда описание изображения

Хотел отрисовать её с помощью ксс Вот что получилось https://jsfiddle.net/4so5mf1t/

<div class="figure">

</div>

.figure{
width:500px;
height:50px;
background: linear-gradient(-185deg, #75a4c0 50%, #d6e4ec 51%);
}

Но как можно модернизировать, что бы была белая полоса между бгшками?

1 ответ 1

1

У меня получился вот такой вариант. Надеюсь, будет полезен.

Кодперо

.figure-container {
  height: 50px;
  width: 500px;
  background: #d6e4ec;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.top-peace {
  background: #75a4c0;
  height: 50px;
  width: 520px;
  transform: rotate(-5.5deg);
  position: absolute;
  top: -26px;
  left: -14px;
  border-bottom: 3px solid #f9f9f9;
}
<div class="figure-container">
  <div class="top-peace"></div>
</div>

Ваш ответ

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

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