Верхняя и нижняя границы согнутых

Question

Я ищу способ создания изогнутых верхних и нижних границ, таких как div на этом изображении. Я пробовал несколько способов, упомянутых здесь, но это зависит от использования белого div s с border-radius поверх основного div, но, как вы можете видеть на этом изображении, он должен быть прозрачным, чтобы отображать фоновое изображение.

Answer 1

Это возможно, используя svg.

Для отзывчивости удалить svg «s width и height атрибутов, добавьте viewBox="0 0 400 150" затем попытайтесь изменить #image» s width и height, то svg будут реагировать на его width и 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>

Answer 2

На самом деле сделать это с помощью CSS будет почти невозможно, и вы бы хорошо, если вы просто попробовать простой PNG файл, созданный с помощью Photoshop, Google Images и т.д., и создать образ именно этого размер, а затем использовать его на веб-сайте.

Вы можете добавить прозрачность к изображению, создав его с помощью инструментов Adobe UI для редактирования изображения, или вы можете использовать альфа-фильтр в CSS, чтобы установить для него эффект прозрачности, чтобы отобразить элемент, который находится за ним это (эффект, который вы хотите).

Answer 3

Другой вешать, а не с помощью обрезки, но несколько фонов.

Технически менее развиты, чем 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; 
} 

THW Идея заключается в том, чтобы разделить элемент в 2-х половин, а затем установить в каждой радиального градиента, который соответствует позиции углов. Конечная позиция градиентов, скорректированных вручную.

Может быть сделано ответственно также.

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 4

Другой подход с одним 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;}

<div></div>