html - 我可以在底部另一个宽度和顶部另一个宽度创建背景吗

Question

我制作了一条高度为 20 像素、宽度为 100% 的线，但我怎样才能实现照片中的效果，这条黑线最后就像一条斜线。第二张照片是我想要实现的，第一张是我的实际设计。

您可以在下方找到代码。

<app-tabs tabAlignment="bottom" height="30px" width="150px" class="general" class="tabs">
  <app-tb style="background: #000000" title="Technical Matrix" topPadding="0px 0px 10px 0px" (click)="showMatrix()">
  </app-tb>
  <app-tb title="Technical Assignment" topPadding="0px 0px 10px 0px" (click)="showAssignment()" >
  </app-tb>
</app-tabs>

.tabs {
  background: #000000;
  width: calc(100% - 69px);
  margin-left: 27px;
}

Answer 1

这是我能想到的:

-webkit-clip-path: polygon(0% 0%, 97% 0%, 100% 25%, 0% 25%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
clip-path: polygon(0% 0%, 97% 0%, 100% 25%, 0% 25%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);

您可以在开发者控制台中修改这些值以使其恰到好处。

这是一个有效的 codepen , 这是对 clip-path 的支持.我相信如果不支持它，它只会回落到原来的形状，看起来还不错。

您始终可以只创建一个图像并将其用作背景!