制作一个有点弯曲的 div答案

【问题标题】：Make a div that go somewhat curved制作一个有点弯曲的 div
【发布时间】：2015-08-26 15:14:24
【问题描述】：

我认为这个问题已经被问了十亿次，但只是另一个案例。

如何使用 HTML / CSS 来实现（如果没有其他选择，JS - 我正在考虑画布或 SVG）：

注意：div 应该能够在整个绿色部分包含滚动的背景图像。这应该适用于 IE9+ 和常见的移动设备（默认浏览器）。此外，形状周围的空间需要保持透明（不能使用白色元素来创建圆形）

什么是更好的选择？

【问题讨论】：

你尝试了什么？
@Abhitalks 我想我们可能只是不小心诊断出了色盲。至于绿色部分，我认为至少没有 Javascript 就没有可靠的方法来重现它。我想这也取决于所需的浏览器支持？
我认为你应该在上面使用图像。
你需要使用 CSS 屏蔽属性！我还没有使用它，但请查看这篇文章。 css-tricks.com/clipping-masking-css
这行得通吗：jsfiddle.net/abhitalks/5f7wsp6n/1 ?

标签： javascript html css css-shapes

【解决方案1】：

CSS 实现

您可以在容器内创建边框形状并隐藏不需要的部分。我使用了视口大小的单元来进行扩展。通过使用这些值可以进一步改进它以满足您的要求。

body {
  background: #F5F5F5;
}
.container {
  height: 70vh;
  overflow: hidden;
  display: inline-block;
  width: 30vh;
  background: white;
  margin: 0 10px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.curve {
  background: transparent;
  border: 20vh solid #7cc576;
  border-radius: 35%;
  height: 100vh;
  transform: translateY(-20vh);
  width: 50vh;
}
.container-left-curved {
  transform: rotateY(180deg);
}
.container-right-curved {
  transform: rotateY(0deg);
}

<div class="container container-left-curved">
  <div class="curve">
  </div>
</div>

<div class="container container-right-curved">
  <div class="curve">
  </div>
</div>

SVG 实现

我保存了您的图像并通过 Inkscape 编辑器生成了优化的 SVG 代码。这看起来比纯 CSS 解决方案好多了。

body {
  background: lightgray;
}

<svg height="300px" width="200px" version="1.1" viewBox="0 0 492 746.00001" fill="#000">

  <g id="layer1" transform="translate(-119.71 -187.93)">
    <path id="path3349" d="m189.71 620.93c0-206.67-0.33548-311-1-311-0.55 0-1-2.25-1-5s-0.45-5-1-5-1-1.9984-1-4.441c0-2.4425-0.45-4.7191-1-5.059-0.55-0.33992-1-1.9415-1-3.559s-0.45-2.941-1-2.941-1-1.0984-1-2.441c0-1.3425-0.45-2.7191-1-3.059-0.55-0.33992-1-1.9415-1-3.559s-0.45-2.941-1-2.941-1-0.88631-1-1.9696-0.9-3.572-2-5.5304c-1.1-1.9585-2-4.2222-2-5.0304 0-0.80827-0.45-1.4696-1-1.4696s-1-0.9-1-2-0.45-2-1-2-1-0.9-1-2-0.45-2-1-2-1-0.9-1-2-0.45-2-1-2-1-0.9-1-2-0.45-2-1-2-1-0.59015-1-1.3114c0-0.72129-0.9-2.2775-2-3.4582s-2-2.7323-2-3.448-0.9-1.8633-2-2.5503c-1.1-0.68696-2-2.0459-2-3.0198 0-0.97393-0.9-2.4195-2-3.2123-1.1-0.79284-2.0021-1.9047-2.0046-2.4708-0.002-0.56608-1.3525-2.4673-3-4.225-1.6474-1.7577-3-3.5577-3.0056-4-0.006-0.44232-2.2557-3.1613-5-6.0422-2.7444-2.8809-4.9897-5.6545-4.9897-6.1636 0-0.50907-2.534-3.4395-5.6312-6.512l-5.6312-5.5864h207.31 207.31l11.311 11.25c6.2212 6.1875 11.317 11.7 11.325 12.25 0.007 0.55 1.788 2.8 3.9571 5s3.9659 4.7875 3.9929 5.75 0.52562 1.75 1.1081 1.75c0.58246 0 0.73793 0.51953 0.34549 1.1545-0.39555 0.64-0.27852 0.88566 0.2626 0.55123 0.98336-0.60775 4.3329 2.601 4.3329 4.1507 0 0.45847 0.9 1.6481 2 2.6436 1.1 0.99549 2 2.6402 2 3.655s0.45 1.845 1 1.845 1 0.59015 1 1.3114c0 0.72129 0.9 2.2775 2 3.4582s2 2.8406 2 3.6886c0 0.84799 0.45 1.5418 1 1.5418s1 0.9 1 2 0.45 2 1 2 1 0.9 1 2 0.45 2 1 2 1 0.9 1 2 0.47656 2 1.059 2c0.58246 0 0.81241 0.39901 0.51101 0.88669-0.30141 0.48768 0.12204 1.4428 0.94098 2.1224 0.81894 0.67966 1.489 2.0806 1.489 3.1133s0.45 1.8776 1 1.8776 1 1.35 1 3 0.45 3 1 3 1 1.1516 1 2.559c0 1.4514 0.43284 2.2915 1 1.941 0.58342-0.36057 1 0.65628 1 2.441 0 1.6825 0.45 3.059 1 3.059s1 1.8 1 4 0.45 4 1 4 1 1.8 1 4 0.45 4 1 4 1 2.25 1 5 0.45 5 1 5c0.66452 0 1 104 1 310v310h-210-210v-311z"
    fill="#7ac474" />
  </g>
</svg>

【讨论】：

正如上面评论中所说，我需要周围的空间来保持透明，但感谢您的努力。
@enguerranws 我相信作者已经把颜色从白色变成透明了。
@enguerranws 现在是透明的。检查应用的正文背景。
非常感谢。这是一个可靠的例子。唯一的事情是：更改边界半径和 translateY 值后，我无法重现我的示例（左曲线和右曲线从来没有相同的半径）。
@ManojKumar: 这好多了 :) SVG 很棒，你不会后悔进入的。顺便说一句，随时加入我和其他几个活跃在形状标签 in this room 中的用户你找时间。

【解决方案2】：

最后，在寻找实现这一目标的好方法之后，这是我的笔记：

1. RaphaelJS

我认为 RaphaelJS 让它变得简单并提供了扩展的兼容性（我在 IE8 和 IE7 上测试过，它可以工作，即使我不需要它）并且更容易操作 .

这是一个活生生的例子：http://jsfiddle.net/bkfssykp/

如您所见，这在某种程度上是基于 SVG 的解决方案：

paper.path("M0,0h259.478c0,0,42.939,36.419,42.939,88.694    c0,132.905,0,368.306,0,368.306H42.939c0,0,0-235.587,0-368.464C42.939,36.345,0,0,0,0z");

我只是将我的 svg 形状的代码直接粘贴到其中。现在，我可以玩它了：动画、修改等。

2。 SVG 剪辑路径

我的第一次尝试是带有 SVG 剪辑路径的 SVG 图像，正如 @Deepak 提到的文章中所说：https://css-tricks.com/clipping-masking-css/

这是一个活生生的例子：http://jsfiddle.net/xptycnkg/3/

Still SVG ：这看起来像 CSS 剪辑路径，但应用于 SVG 元素。适用于 IE9。

【讨论】：