Question

这是我的问题：

我有一家设计公司的样机，它想要一个文本块，该文本块在一些看起来像这样的大文本后面有一个“破”的方形边框（描述：大文本后面有一个小的白色框架，被文本分解了），然后是下面的较小文本链接）： Image of an element on client's website,

在设计中，文本显示在白色方形框架上。我现在实现的方法是将大文本的背景颜色设置为灰色。由于当前图像的背景为灰色，因此可以达到预期的效果。

需要的是实现这种效果（打破白框），无论图像外观如何。因为现在发生这种情况：

the gray background of the text appears like a box in front of the image -- it ought to be transparent

为进一步说明，如果我将大文本的背景色设置为transparent，则会显示整个框架（所需的效果是残破的框架）：

background: transparent #1

更多信息（如果有帮助）：白色框架元素只是带有白色边框的div。

如果有合适的CSS解决方案（首选），或者我需要使用SVG或PNG，我不确定在这种情况下到底要搜索什么？谢谢您的帮助。

Answer 1

@Temani Afif在评论中指出，这不是一个盒子，而是CSS中两个单独的形状。

我举了一个例子来说明如何使用flexbox。

.page {
  background-color: black;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.box-top {
  width: 100px;
  height: 10px;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  border-bottom: none;
}

.box-bottom {
  width: 100px;
  height: 30px;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  border-top: none;
}

.separator {
  color: white;
  width: 100%;
  margin: 5px 0;
  padding: 0;
  font-size: 40px;
  text-align: center;
}

<div class="page">
  <div class="box-top"></div>
  <p class="separator">
    Headline
  </p>
  <div class="box-bottom"></div>
</div>

Answer 2

您可以制作一个带有边框的正方形元素，并在其上使用蒙版：

body {
  margin: 0;
  min-height: 100vh;
  background: black;
  box-sizing: border-box;
  padding-top: 1px;
}
h2.fancy {
  position: relative;
  text-align: center;
  color: white;
  padding-top: 12px;
}
h2.fancy:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border: 5px solid white;
  clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 40px, 100% 40px, 100% 100%, 0 100%);
}

<h2 class=fancy>I'm a fancy title...</h2>

此解决方案的优点是您可以轻松缩放，以适应各种屏幕尺寸的变化。例如，标题为font-size：

document.querySelector('input.font-size').addEventListener('input', function(e) {
  document.querySelector('h2').style.fontSize = e.target.value + 'px';
})

body {
  margin: 0;
  min-height: 100vh;
  background: url(https://picsum.photos/800) center /cover;
  box-sizing: border-box;
  padding-top: 1px;
}
.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}
h2.fancy {
  z-index: 1;
  position: relative;
  text-align: center;
  color: white;
  padding-top: 12px;
}
h2.fancy:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  display: block;
  border: 5px solid white;
  clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 calc(10px + 1.3em), 100% calc(10px + 1.3em), 100% 100%, 0 100%);
}
input[type=range] {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
}

<h2 class=fancy>I'm a fancy title...</h2>
<div class=overlay></div>
<input type=range min=12 max=36 class=font-size>

缺点是doesn't work在IE或Edge低于18或Opera mini中。不过，此特定示例在IE 18中有效，因为它仅使用polygon()。

这个设计有CSS解决方案吗？

2 个答案: