html - 用对 Angular 线创建盒子

Question

我需要创建一个带有对 Angular 线边缘的盒子。下面是图片和here is a link to it .

我如何只使用 CSS 和 HTML 来做到这一点？

我知道可以在 CSS 中创建三 Angular 形，所以我可能会为框的“黄色”部分创建一个带有圆 Angular 的 div。虽然不确定如何处理内部灰色部分。

我想避免使用多图片解决方案，因为这将在移动设备上进行，以便尽快加载。

我正在研究一个内部有 3 个 div，其中一个是三 Angular 形的解决方案，我找到了一个三 Angular 形生成器 here ，那么黄色div上的相对位置，以及之后内容的绝对位置？

Answer 1

有一种方法可以在不使用额外元素的情况下实现这种形状。我可以理解不愿意使用多张图片，但这种方法只使用了多张背景，不会对页面加载时间产生任何影响。

在这种方法中，我们创建了一个较小尺寸的linear-gradient背景，并将其放置在容器的右上角，以实现三 Angular 形效果。

这种方法也可以毫无问题地用于媒体查询。

.shape {
  height: 400px;
  width: 50vw;
  background: linear-gradient(225deg, #F3D56A 50%, transparent 50%), #EFEFEF;
  background-size: 75px 75px;
  background-repeat: no-repeat;
  background-position: right top;
  border-radius: 4px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, .5);
  border-top: 5px #F3D56A solid;
}
@media (max-width: 300px) {
  .shape {
    width: 150px;
    background-size: 50px 50px;
  }
}
@media (min-width: 301px) and (max-width: 600px) {
  .shape {
    width: 300px;
    background-size: 50px 50px;
  }
}

<div class="shape"></div>