Question

尝试使用CSS创建倒角（也称为铲起）样式的矩形。在大多数情况下都能正常工作。甚至反应灵敏。但是，我有一个border元素，在某些屏幕上（不是全部），它将矩形（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

您的背景从边缘到中心，似乎有时亚像素渲染导致其跳回一个像素，您可以通过稍微拉伸背景以使其重叠来解决此问题。

background-size: 51% 51%;

仅供参考：您可以通过在倒角上设置随机宽度来进行测试，请注意，由于引擎无法将像素分成两半来显示您想要的内容，因此每个不均匀的数字都会导致线条出现。

Answer 2

如果要显示背景，可以使用以径向渐变制成的重复区域，该区域在中间有一个孔。通过移动具有背景位置的区域将孔移到角落。用另一个可以接触侧面而不是角落的线性渐变覆盖不需要的孔。

// ViewModel
this.stageSelectorErrorMessage =
    this.stageSelectorEithers
    .Select(either => either.Error) // string on failure, null on success
    .ScheduleOn(RxApp.MainThreadScheduler)
    .ToProperty(this, x => x.StageSelectorErrorMessage);

// View
this.WhenActivated(disposableRegistration => {
    // ...
    this.OneWayBind(this.ViewModel,
        viewModel => viewModel.StageSelectorErrorMessage,
        view => view.stageSelector.ToolTip
    ).DisposeWith(disposableRegistration);
})

body {
  background: silver;
}

.div-chamfer {
  background:
    radial-gradient(closest-corner at center, #674000 85%, transparent 85%) center no-repeat,
    radial-gradient(circle at 50% 50%, transparent 7px, #674000 8px) -50% -50%/50% 50%;
  border: 1px solid #DCBD64;
  width: 75%;
  height: 64px;
}

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

样式化带有边框的倒角/铲起的矩形

2 个答案: