用css制作矩形

使用CSS创建矩形的方法

通过CSS可以轻松创建矩形，以下是几种常见的实现方式：

方法一：使用div元素

<div class="rectangle"></div>

.rectangle {
  width: 200px;
  height: 100px;
  background-color: #3498db;
}

方法二：使用边框属性

.rectangle {
  width: 200px;
  height: 100px;
  border: 2px solid #e74c3c;
}

方法三：使用伪元素

<div class="box"></div>

.box::before {
  content: "";
  display: block;
  width: 150px;
  height: 80px;
  background-color: #2ecc71;
}

方法四：使用CSS clip-path

.rectangle {
  width: 200px;
  height: 100px;
  background-color: #9b59b6;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

方法五：使用SVG

<svg width="200" height="100">
  <rect width="200" height="100" fill="#f1c40f"/>
</svg>

自定义矩形样式

.custom-rect {
  width: 250px;
  height: 120px;
  background: linear-gradient(to right, #1abc9c, #16a085);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

每种方法适用于不同场景，div元素方法最简单常用，SVG适合需要缩放的情况，clip-path可用于创建更复杂的形状变形。