css - 为带边框的倒 Angular/挖 Angular 矩形设计样式

Question

尝试使用 CSS 创建一个倒 Angular (又名铲形)样式的矩形。让它在大多数情况下工作。它甚至是响应式的。但是，我有一个边框元素，在某些屏幕上，不是所有屏幕上，它将矩形 (div) 分成两半甚至四个象限。我知道默认情况下，这种类型的矩形很难仅使用 CSS 创建，但也许有人知道为什么会在某些屏幕上发生这种情况以及可能的解决方法。

我的代码:

.div-chamfer {
  background: #674000;
  background: linear-gradient(135deg, transparent 5px, #674000 0) top left, linear-gradient(225deg, transparent 5px, #674000 0) top right, linear-gradient(315deg, transparent 5px, #674000 0) bottom right, linear-gradient(45deg, transparent 5px, #674000 0) bottom left;
  background-repeat: repeat, repeat, repeat, repeat;
  background-image: linear-gradient(135deg, transparent 5px, rgb(103, 64, 0) 0px), linear-gradient(225deg, transparent 5px, rgb(103, 64, 0) 0px), linear-gradient(315deg, transparent 5px, rgb(103, 64, 0) 0px), linear-gradient(45deg, transparent 5px, rgb(103, 64, 0) 0px);
  background-size: auto, auto, auto, auto;
  background-image: radial-gradient(circle at 0 0, rgba(217, 191, 91, 0) 7px, #674000 8px), radial-gradient(circle at 100% 0, rgba(217, 191, 91, 0) 7px, #674000 8px), radial-gradient(circle at 100% 100%, rgba(217, 191, 91, 0) 7px, #674000 8px), radial-gradient(circle at 0 100%, rgba(217, 191, 91, 0) 7px, #674000 8px);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  border: 1px solid #DCBD64;
  clear: none;
  float: left;
  width: 75%;
  height: 64px;
  overflow: hidden;
}

h1 {
  color: #FFF;
  text-align: center;
  line-height: 1;
}

<div class="div-chamfer">
  <h1>Hello World!</h1>
</div>

Answer 1

您的背景从边缘到中心，看起来有时亚像素渲染会导致它向后跳一个像素，您可以通过略微过度拉伸(stretch)背景来导致重叠来解决这个问题。

background-size: 51% 51%;

仅供引用:您可以通过在倒 Angular 上设置随机宽度来测试这一点，请注意每个奇数都会导致线条，因为引擎无法将像素分成两半来显示您想要的内容。