使用 CSS 响应不规则背景形状

Question

我一直在尝试使用纯 CSS 实现与图像中所示相同的结果。 我尝试使用背景图片（封面...），但它没有响应（剪切形状） 我设法通过剪辑路径获得了类似的结果，但不是圆角，并且并非所有浏览器都支持。

.shape {
background:#16489F;
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}

我的目标：

非常感谢

Answer 1

这是一个基于this previous answer:的想法

.box {
  margin:20px auto;
  font-size:22px;
  min-width:200px;
  display:table;
  padding:10px 30px;
  box-sizing: border-box;
  text-align:center;
  color:#fff;
  position:relative;
  z-index:0;
}
.box::before,
.box::after,
.box span::before,
.box span::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0; 
  right:50%;
  bottom:50%;
  background:#16489F;
  border-radius:10px 0 0 0;
  transform:var(--s,scaleX(1)) skew(-35deg);
  transform-origin:right bottom;
}
.box::after {
  --s:scalex(-1);
}
.box span::before {
  --s:scaleY(-1);
}
.box span::after {
  --s:scale(-1);
}

<div class="box"><span></span> some text here</div>

<div class="box"><span></span> more and more <br> text here</div>

<div class="box"><span></span> even more <br> and more <br> text here</div>


<div class="box"><span></span> long long loooooonooooog text <br> and more <br> text here</div>

如果你想要边缘的半径，如下所示：

.box {
  margin:20px auto;
  font-size:22px;
  min-width:200px;
  display:table;
  padding:10px 30px;
  box-sizing: border-box;
  text-align:center;
  color:#fff;
  position:relative;
  z-index:0;
}
.box::before,
.box::after,
.box span::before,
.box span::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0; 
  right:50%;
  bottom:calc(50% - 5px);
  background:#16489F;
  border-radius:10px 0 0 11px;
  transform:var(--s,scaleX(1)) skew(-35deg);
  transform-origin:100% calc(100% - 5px);
}
.box::after {
  --s:scalex(-1);
}
.box span::before {
  --s:scaleY(-1);
}
.box span::after {
  --s:scale(-1);
}

<div class="box"><span></span> some text here</div>

<div class="box"><span></span> more and more <br> text here</div>

<div class="box"><span></span> even more <br> and more <br> text here</div>


<div class="box"><span></span> long long loooooonooooog text <br> and more <br> text here</div>

Answer 2

一个元素可以有多个背景图像，因此您可以使用图像作为端盖，并为实际内容区域使用匹配的颜色填充。

这个演示很粗糙，但它展示了这个想法。我给填充留下了明显不同的颜色，以便更容易看到是什么。我正在使用您的示例图像的快速屏幕截图，我抓住了一点边缘，导致线条从帽子延伸出来。但你明白了。

.demo {
  padding: 24px 72px;
  color: white;
  background-color: skyblue;
  background-image:
    url(https://i.imgur.com/LocAlN0.png),
    url(https://i.imgur.com/zXDA91q.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 center, center right;
}

<div class="demo">
   Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots.
 </div>

Answer 3

我会使用 3 个 div，第一个和最后一个使用 background-images（不规则形状），而中间的一个使用 background-color。