CSS 阶梯式边框 - 重新创建设计作品

Question

我正在努力从 html/css 中的海报重新创建设计好的标题。

我可以让它按照图像工作，但它需要有透明背景，以便图像显示出来。但是，当我将背景设置为透明时，分割边框就会出现，这不是我想要的。

有什么办法可以解决这个问题吗？

---

带有纯色背景的标题图像

.branded-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-header-top {
  display: inline-block;
  border: 2px solid #fff;
  border-bottom: none;
  border-radius: 8px 20px 0 0;
  padding: 7px 37px 0px 20px;
  text-align: left;
  font-size: 35px;
  background: #D45027;
  position: relative;
  z-index: 1;
  color: #fff
}

.brand-header-bottom {
  display: inline-block;
  border: 2px solid #fff;
  border-top: 2px solid #fff;
  border-radius: 0 8px 8px 8px;
  padding: 16px 19px 6px 20px;
  text-align: left;
  font-size: 53px;
  background: #D45027;
  margin-top: -2px;
  font-family: CentraleSans, sans-serif;
  color: #fff;
  line-height: 64px;
}

<div class="branded-header">
  <div class="brand-header-top">
    Wheelchair Basketball
  </div>
  <div class="brand-header-bottom">
    Senior League 2024/2025
  </div>
</div>

Answer 1

我认为您可以通过多种方式实现此布局，并且您现在可能已经处于良好状态，因此我将向您提供背景图像效果的想法。以下方法使用背景图像、颜色叠加和混合模式来实现类似的效果。这是一个例子：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div.background {
  height: 250px;
  /* 1. Add your background image */
  background-image: url(https://gameonfamily.com/wp-content/uploads/2017/02/Depositphotos_59344433_original.jpg);
  /* 2. Set a color overlay */
  background-color: #c55935;
  /* 3. Use a blend mode to achieve the visual effect you want */
  background-blend-mode: multiply;
  background-position: center;
  background-size: cover;
}

<div class="background">
  <!-- YOUR CONTENT! -->
</div>

在这种情况下，

multiply

混合模式起作用，因为它将图像与叠加颜色相乘，从而产生更暗的图像。此模式对于向图像添加色调特别有用，同时保留细节，我认为这正是您想要的。