带边框的空中飞人

Question

我使用CSS创建了一个空格。

HTML：

<div class="trapezeG"></div>

CSS：

.trapezeG {
  position: absolute;
  left: 214px;
  top: 120px;
  width: 1px;
  height: 70px;
  border: 1px solid #069;
  border-color: transparent transparent transparent #000000;
  border-width: 32px;
  transform: rotate(180deg);
}

这是我的小提琴：https://jsfiddle.net/sfck34y3/

以下是实际结果：

我想改变顶点和底点的高度，使其看起来比现在更接近矩形。我该如何修改边框宽度？

Answer 1

您可以使用border-left-width来保持空中飞人的宽度，并使用border-width属性缩小顶部/底部边框。您需要在border-left-width属性之后设置border-width属性，否则它将被覆盖：

.trapezeG {
  position: absolute;
  left: 214px;
  top: 120px;
  width: 1px;
  height: 70px;
  border: 1px solid #069;
  border-color: transparent transparent transparent #000000;
  border-width: 10px;
  border-left-width: 32px;
  transform: rotate(180deg);
}

<div class="trapezeG">
</div>

---

按commented @Hashem Qolami，转换属性不是获取此方向所必需的 您只需要删除转换并使用右边框而不是左边框来制作空格形状：

.trapezeG {
  position: absolute;
  left: 214px;
  top: 120px;
  width: 1px;
  height: 70px;
  border: 1px solid #069;
  border-color: transparent #000000 transparent transparent;
  border-width: 10px;
  border-right-width: 32px;
}

<div class="trapezeG">
</div>

Answer 2

形状的左侧由div的height定义。虽然右侧由height +顶部/底部边框定义。

因此，要仅更改左侧高度，您需要增加高度并减小顶部/底部边框宽度，以便整体高度不会改变。

.trapezeG {
      position: absolute;
      left: 214px;
      top: 120px;
      width: 1px;
      height: 100px;
      border: 1px solid #069;
      border-color: transparent transparent transparent #000000;
      border-width: 17px 32px;
      transform: rotate(180deg);
    }

<div class="trapezeG">
</div>

---

这是一个在两种尺寸之间转换以展示效果的演示：https://jsfiddle.net/sfck34y3/5/（将鼠标悬停在形状上）