如何仅使用 css 创建压缩框

Question

我正在考虑如何像这样设计一个挤压框的样式：

我发现我可以使用伪元素和 border-radius 作为百分比来实现类似的结果。这是 CodePen：https://codepen.io/micu22/pen/eYzpmqR 这是代码：

div {
  background: lightblue;
  padding: 10px 20px;
  border-radius: 8px;
  position: relative;
}
div::after,
div::before {
  content: "";
  position: absolute;
  background: white;
  width: 100%;
  height: 20px;
  left: 0;
}
div::before {
  top: -17px;
  border-radius: 50%;
}
div::after {
  bottom: -17px;
  border-radius: 50%;
}

但也许有更简单或更优雅的解决方案？

Answer 1

我会像下面那样使用渐变着色和 SVG 滤镜：

.box {
   width:200px;
   height:250px;
   background:
     /*                   v-- adjust the 15% here */
     radial-gradient(50% 15% at top,   transparent 98.5%,lightblue) top,
     radial-gradient(50% 15% at bottom,transparent 98.5%,lightblue) bottom;
   background-size:100% 51%;
   background-repeat:no-repeat;
   filter: url('#goo');
}

<div class="box"></div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>                                  <!-- adjust the the 13 here --v         -->
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="13" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Answer 2

这取决于内容将如何存在。如果这是一个固定高度的容器，我可能会选择使用 SVG 背景的解决方案。

我认为最优雅（或至少是内在）的解决方案是使用 clipping paths. 这将允许您创建一个具有您想要的精确形状的 SVG 并裁剪容器或容器的背景图像，以便您没有掩饰元素的技术上仍然可见的部分。

Clippy 如果您以前从未使用过剪贴蒙版，那么这是一个很棒的工具。

如何仅使用 css 创建压缩框

How to create a squeezed box using only css

css

css-shapes