是否有一种仅使用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);
}