时间戳

首页 > 解决方案 > 使用 CSS 响应不规则背景形状

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

问题描述

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

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

我的目标是：

在此处输入图像描述

非常感谢

标签： cssclip-path

解决方案

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

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

.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>

推荐阅读