顶部和底部弯曲的边框

Question

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

Answer 1

可以使用svg。

要获得响应，请移除svg的{​​{1}}和width属性，添加height，然后尝试更改viewBox="0 0 400 150"＆＃39; s { {1}}和#image，width将回复其height和svg。

Demo on Fiddle表现出反应灵敏的形象。

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

＆＃13;

＆＃13;

width

＆＃13;

height

＆＃13;

＆＃13;

＆＃13;

Answer 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;
}

<div class="test"></div>

Answer 3

另一种方法有一个div，2个伪元素，border-radius和box-shadows：

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;}

<div></div>

Answer 4

实际上使用CSS执行此操作几乎是不可能的，如果您只是尝试使用Photoshop，Google图像等创建的简单PNG图像并创建完全相同大小的图像然后在内部使用它，那么您会很好网站。

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