css各种形状制作

CSS 制作矩形

使用 width 和 height 属性定义矩形尺寸，background-color 设置填充色：

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

CSS 制作圆形

通过 border-radius: 50% 将元素变为圆形，需确保宽高相等：

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #e74c3c;
}

CSS 制作三角形

利用边框透明特性实现三角形。以下示例创建朝上的三角形：

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #2ecc71;
}

CSS 制作梯形

结合 perspective 和 rotateX 实现梯形效果：

.trapezoid {
  width: 150px;
  height: 0;
  border-bottom: 100px solid #f39c12;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

CSS 制作菱形

通过 transform: rotate(45deg) 旋转正方形元素：

.diamond {
  width: 100px;
  height: 100px;
  background-color: #9b59b6;
  transform: rotate(45deg);
  margin: 60px; /* 调整间距 */
}

CSS 制作五角星

使用 clip-path 多边形路径创建星形：

.star {
  width: 0;
  height: 0;
  color: #f1c40f;
  font-size: 60px; /* 控制大小 */
  position: relative;
}

.star:before {
  content: "★";
}

CSS 制作对话气泡

组合圆角和三角形实现气泡效果：

.bubble {
  width: 200px;
  height: 120px;
  background: #3498db;
  border-radius: 15px;
  position: relative;
}

.bubble:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 20px;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #3498db transparent;
}

CSS 制作心形

使用 ::before 和 ::after 伪元素组合：

.heart {
  width: 100px;
  height: 90px;
  position: relative;
}

.heart:before, .heart:after {
  content: "";
  width: 50px;
  height: 80px;
  background: #e74c3c;
  border-radius: 50px 50px 0 0;
  position: absolute;
}

.heart:before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

CSS 制作环形

通过边框和半透明背景实现环形：

.ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #3498db;
  background-color: transparent;
}

CSS 制作扇形

使用 clip-path 和 transform 创建扇形：

.pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#e74c3c 0% 30%, transparent 0);
}

注意事项

• 现代浏览器推荐使用 clip-path 实现复杂形状
• 考虑添加 transform-origin 控制变形基准点
• 部分形状需要配合 position: relative/absolute 定位
• 响应式设计时使用百分比单位替代固定像素值