Есть ли способ рисовать фигуры, используя только CSS и HTML?

Question

Мне нужна помощь с созданием фигур в HTML / CSS в качестве разделителей между одним разделом веб-сайта.

Вот как это должно выглядеть:

Есть изображение вверху и содержимое внизу, и мне нужно нарисовать эти формы.

помогите, пожалуйста:)

Answer 1

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

https://jsfiddle.net/m6aoLw9f/5/

HTML

<div class="bluebox"></div>
<div class="blueline"></div>

css

.bluebox {
  position: absolute;

  top: 10%;
  left: 10%;

  height: 20px;
  width: 200px;

  background-color: blue;
  opacity: 0.5;

  transform: skew(-5deg, -5deg);
}

.blueline{
   position: absolute;

   top: 12%;
   left: 8%;

   height: 2px;
   width: 250px;

   background-color: blue;
   opacity: 0.5;

   transform: skew(-5deg, -5deg);
}