顶部和底部弯曲边框答案

【问题标题】：Top and Bottom bent borders顶部和底部弯曲边框
【发布时间】：2016-03-25 20:19:20
【问题描述】：

我正在寻找一种方法来创建弯曲的顶部和底部边框，例如此图像中的 div。我尝试了这里提到的一些方法，但这取决于在主要的border-radius 上使用白色divs 和div，但正如您在此图像中看到的那样，它应该是透明的以显示背景图像。

【问题讨论】：

如果您在 phtoshop 中创建具有相同形状的 png 图像并将不透明度设置为 70-75% 左右并将其设置为 div 标签的背景会更好

标签： css curve css-shapes

【解决方案1】：

这可以使用svg。

为了响应性删除svg 的width 和height 属性，添加viewBox="0 0 400 150" 然后尝试更改#image 的width 和height，svg 将响应其@ 987654335@和height。

Demo on Fiddle 展示响应式形状。

^{Browser support for this approach - 这适用于除 IE8 以外的所有浏览器。}

body {
  background: teal;
}
#image {
  width: 600px;
  height: 300px;
  position: relative;
  background: url(http://lorempixel.com/600/300);
}
svg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="image">
  <svg width="400" height="150">
    <path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75 0,10" />
  </svg>
</div>

【讨论】：

但是如何改变宽度和高度呢？我已经尝试了一切，但它不起作用jsfiddle.net/j8kudk9k/2
@Yasser - 您需要的宽度和高度是多少？
@Purag - Check this out。这将适用于 Chrome。
@Yasser - Check out this Fiddle。更改#image的width和height，形状的宽度和高度也会发生变化。
处理 chrome、宽度和高度变化没有问题。非常感谢。

【解决方案2】：

另一种可能性，不使用剪辑，而是使用多个背景。

技术上不如chipChocolate答案先进，只是提供了一个替代方案

.test {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 400px;
    height: 100px;
    border-radius: 10px;
    background-image: radial-gradient(circle at center -778px, 
        transparent 800px, rgba(255,0,0,0.4) 800px),
        radial-gradient(circle at center 828px, 
        transparent 800px, rgba(255,0,0,0.4) 800px);
    background-position: center top, center bottom;
    background-size: 100% 50%, 100% 50%;
    background-repeat: no-repeat;
}

想法是将元素分成两半，然后在每一半中设置一个与角位置匹配的径向渐变。手动调整渐变的最终位置。

也可以响应式地完成。

demo

body {
    width: 100%;
    height: 100%;
background: url(http://placekitten.com/g/600/300);
}

.test {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 400px;
    height: 100px;
    border-radius: 10px;
    background-image: radial-gradient(circle at center -778px, 
        transparent 800px, rgba(255,0,0,0.4) 801px),
        radial-gradient(circle at center 828px, 
        transparent 800px, rgba(255,0,0,0.4) 801px);
    background-position: center top, center bottom;
    background-size: 100% 50%, 100% 50%;
    background-repeat: no-repeat;
}

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：

锯齿状边框通常在渐变的 2 步相同时显示。我在 sn-p 中增加了第二个值，但仍然有一些锯齿......我认为只是玩一点值的问题

【解决方案3】：

另一种方法，一个 div、2 个伪元素、边框半径和框阴影：

div {
  width: 70%; height: 150px;
  margin: 20px auto;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.5;
}
div:before,div:after {
  content: '';
  position: absolute;
  height: 100%; width: 300%;
  left: -100%;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 140px red;
}
div:before {top: -146px;}
div:after {bottom: -146px;}


body {background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size: cover;}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

实际上，使用 CSS 实现这一点几乎是不可能的，如果您尝试使用 Photoshop、Google 图像等创建的简单 PNG 图像，然后精确地创建这个大小的图像，然后在内部使用它，那就太好了网站。

您可以在创建图像时添加透明度，使用 Adobe UI 工具编辑图像，也可以使用 CSS 中的 alpha 过滤器为其设置透明度效果以显示位于其后面的元素（你想要的效果）。

【讨论】：

@web-tiki 的回答表明使用 css 很有可能。