CSS+HTML 生成不规则矩形：简单教程和示例

以下是一个用 CSS 和 HTML 生成不规则矩形的示例：

HTML 代码：

<div class='irregular-rectangle'></div>

CSS 代码：

.irregular-rectangle {
  width: 200px;
  height: 100px;
  background-color: #007bff;
  position: relative;
}
.irregular-rectangle:before {
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid #007bff;
}
.irregular-rectangle:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -50px;
  width: 0;
  height: 0;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #007bff;
}

解释：

• 首先，我们创建了一个 <div> 元素，并给它添加了一个类名 'irregular-rectangle'。
• 接下来，我们使用 CSS 来设置 '.irregular-rectangle' 的宽度、高度和背景颜色，并将其定位为相对位置。
• 接下来，我们使用 ':before' 和 ':after' 伪元素来创建两个三角形，以形成不规则矩形的左侧和右侧。我们使用 'position: absolute' 将它们定位在矩形的顶部和底部，并使用 'border-*' 属性设置它们的形状和颜色。
• 最后，我们使用 'content' 属性将它们的内容设置为空字符串，以确保它们显示为纯形状，而不是文字或图标。