CSS创建边到边的三 Angular 形

Question

我使用 css 创建了一个三 Angular 形:

.box {

width: 0;
height: 0;
border-style: solid;
border-width: 540px 964px 540px 0;
border-color: transparent #007bff transparent transparent;

}

但我试图让我的三 Angular 形看起来像这样:

我的问题是如何使顶部和底部的边到边更紧密？

Answer 1

您可以使用 :after 伪元素创建一个正方形，然后使用 rotate 和 translate 转换。

.element {
  display: inline-block;
  background: lightgreen;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.two {
  margin-left: 30px;
  width: 300px;
  height: 300px;
}

.element:after {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #30373F;
  transform: rotate(45deg) translate(10%, -20%);
}

<div class="element"></div>
<div class="element two"></div>