带边框的空中飞人

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);
}

这是我的Fiddle：https://jsfiddle.net/sfck34y3/

这是实际结果：

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

Answer 1

您可以使用 border-left-width 来保持空中飞人的宽度并使用 border-width 属性减少 top/bottom 边框。您需要在 border-width 属性之后设置 border-left-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>

因为 by @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 + top/bottom 边框定义。

所以只改变左边的高度，你需要增加高度，同时减小top/bottom边框宽度，这样整体高度就不会改变。

.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/（将鼠标悬停在形状上）

带边框的空中飞人

Trapeze with border

css

border

css-shapes