css 设计两个菱形中心一样

在 CSS 中，如果你想设计两个大小相同的菱形（通常是三角形），但它们的顶点位于同一个中心点，可以使用伪元素 `::before` 和 `::after` 并结合 `transform` 属性来实现。这里是一个简单的例子：

.parent {
  position: relative;
  width: 100px; /* 菱形宽度 */
  height: 50px;  /* 半边高度 */
}

.parent::before,
.parent::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.parent::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg); /* 正菱形 */
  border-width: 0 50px 50px 0;
  border-color: transparent transparent #your-color transparent;
}

.parent::after {
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg); /* 反菱形 */
  border-width: 50px 0 0 50px;
  border-color: transparent transparent transparent #your-color;
}

/* 如果你想要颜色一致，把#your-color设为同一种颜色即可 */

在这个例子中，`.parent` 是包含这两个菱形的容器，`::before` 创建正方形的左上角菱形，`::after` 则创建右下角菱形。通过调整位置和旋转角度，两者就会看起来像是从同一个中心点辐射出来的。