Div弯曲的两侧

Question

我希望创建以下独特的形状作为文本容器，但不确定它是否可以使用div。我尝试了一些边界半径和定位CSS黑客，显然没有一个工作。我希望能够有一个彩色边框，一个背景图像来填充它，以及文本能够作为标题进入内部。我怎么能创造这个形状？ CSS甚至可以走了吗？或者SVG是更好的选择吗？帮助

我已经看到这些SO帖子类似，但不是我想要的：

Rectangle with curved sides | How to create div with curve in css and html5?

Answer 1

使用SVG作为外形遮罩，并在面具中放置任何你想要的东西。在这种情况下，您可以在形状中放置重复的圆BG，并将SVG应用为其掩码。

您可以通过谷歌搜索SVG蒙版来在线查找SVG蒙版的完整教程 - 或者您可以在以下位置查看：http://tutorials.jenkov.com/svg/mask.html

附注：为避免将来发生任何损失，请提供您尝试过的示例，以便我们能够帮助您解决编程问题。

Answer 2

您可以将图像用作边框，但是您尝试制作的形状很难做到这一点。要使用图像边框，您必须具有更方形的形状。

但是你可以使用svg作为背景图像并使其成为div容器的100％。

#div
{
    width:100%;
    height: 100%;
    background: url("../../../images/test.svg") 0 0 no-repeat;
    background-size: 100% 100%;
}

您可能不是背景尺寸。尝试使用和不使用以查看差异。有时它有助于svgs，有时不会。

如果您需要限制尺寸，您有两种选择。使这个div具有特定的大小，或者制作一个固定的宽度div并将此div放入其中。

Answer 3

我已经使用纯CSS为您创建了这个，但是，在制作中，您需要调整z-index，以便：before和：after伪元素不会阻止其他内容。

这是笔：http://codepen.io/Cruiser/pen/KgwOxv

基本上，我们使用一些很酷的背景技巧和：之前和之后用白色边框和绝对定位来使形状看起来像你的形象。

.bendy:before {
  content: "";
  position:absolute;
  background-color:white;
  width:53%;
  height:50%;
  top:-175px;
  left:436px;
  border-style: solid;
  border-color:white;
  border-bottom-color:blue;
  border-bottom-width:10px;
  border-radius: 40%;
}

后台修改自：http://bennettfeely.com/gradients/，这是一个很棒的CSS背景技巧。这是要点 -

background:
radial-gradient(
    magenta,
    magenta 40%,
    transparent 40%,
    transparent 100%
), floralwhite;

background-size:
    4em 4em;

background-blend-mode: multiply;
background-position:
    0 0,
    -33% -33%,
    -200% -200%;
 }