css画四边形 一个角30角

要使用CSS来画一个具有一个30度角的四边形，您可以使用CSS的伪元素和transform属性来实现。以下是一个示例代码：

.quadrilateral {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: blue;
}

.quadrilateral::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: red;
  transform-origin: top right;
  transform: skew(-30deg);
}

.quadrilateral::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: red;
  transform-origin: top left;
  transform: skew(30deg);
}

在上面的代码中，我们创建了一个具有200px宽度和100px高度的容器，并为其设置了蓝色背景。然后，我们使用`::before`和`::after`伪元素来创建两个三角形，并设置它们的背景颜色为红色。

通过使用`transform: skew()`属性，我们将两个三角形进行了倾斜变形。`transform-origin`属性用于指定变形的原点位置。

您可以根据需要调整容器的尺寸、颜色和角度。请注意，这只是一个示例代码，您可能需要根据您的具体情况进行调整。