html - 矩形 HTML 和 CSS3 中的菱形

Question

我想在矩形中制作一个钻石。我已经用正方形做了:

.box {
  width:100px;
  height:100px;
  background:orange;
  z-index:1;
  position:relative;  
}

.box:before {
  position:absolute;
  content:'';
  width:70.71%;
  height:70.71%;
  transform: rotate(45deg);
  background: red;
  top: 15%;
  left: 15%;
}

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

但是我想把它变成这样:

矩形是响应式的，因此它的大小永远不会相同。有什么想法吗？

非常感谢

Answer 1

此方法使用两个三 Angular 形，这些三 Angular 形使用 CSS border 生成。

我认为您不能将 % 用于 border 宽度，因此我改用了视口(viewport)单位。

.box {
  width: 50vw;
  height: 25vw;
  background: orange;
  z-index: 1;
  position: relative;
}

.box:before,
.box:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

.box:before {
  border-right: solid 25vw red;
  border-top: solid 12.5vw transparent;
  border-bottom: solid 12.5vw transparent;
}

.box:after {
  right: 0;
  border-left: solid 25vw red;
  border-top: solid 12.5vw transparent;
  border-bottom: solid 12.5vw transparent;
}

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