角CSS形状

Question

我正在尝试仅使用CSS制作以下形状，问题是我无法在中间获得中间的白色正方形，您怎么能解决这个问题？ 形状：

这是我到目前为止所拥有的：

<div style="position:absolute; top:20px; right:20px; border-bottom:100px solid white; border-left:100px solid blue;">
			    <span style="width:50px; z-index:99999; background-color:white; height:50px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"></span>
			</div>

Answer 1

或者仅使用简单的旧边框。

.border {
  width: 15px;
  height: 15px;
  border: 15px solid transparent;
  border-top-color: #39373c;
  border-left-color: #39373c;
}

<div class="border"></div>

Answer 2

使用边框图像和简单的渐变，您可以更轻松地完成

：

.box {
  width:50px;
  height:50px;
  border:50px solid transparent;
  border-image:linear-gradient(to bottom right,blue 50%,transparent 0) 20;
}

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

使用您的代码，您可以像这样进行调整：

.box {
  position: absolute;
  top: 20px;
  right: 50px;
  border-bottom: 100px solid white;
  border-left: 100px solid blue;
}

.box>* {
  width: 50px;
  z-index: 2;
  background-color: white;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-150%,50%);
}

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

Answer 3

.corner {
  border: 20px solid black;
  border-right-color: transparent;
  border-bottom-color: transparent;
  width: 30px;
  height: 30px;
}

<div class='corner'></div>