Отрицательные границы (css)

75
4

Я знаю, как создать границу с css, которая выглядит так:

    ___________
_/ \_
/ \
| |
| |

Но есть ли возможность создать границу, которая выглядит так:

|\_             _/|
| \___________/ |
| |
| |

Заранее спасибо!

спросил(а) 2014-03-15T13:49:00+04:00 7 лет назад
1
Решение
76

Решение, использующее псевдоэлемент с теневой коробкой:

div {
background: orange;
width: 400px;
height: 40px;
margin-top: 100px;
z-index: 1;
position: relative;
}

div:after {
content: "";
position: absolute;
height: 100px;
left: 0px;
right: 0px;
bottom: 100%;
background-color: transparent;
border-bottom-left-radius: 50% 70px;
border-bottom-right-radius: 50% 70px;
box-shadow: 0px 0px 0px 100px orange;
clip: rect(0px, 400px, 100px, 0px);
}

играть на скрипке

ответил(а) 2014-03-15T14:39:00+04:00 7 лет назад
87

oki :), поэтому из моего комментария, примера и вашей скрипки, это то, что вы ищете? http://jsfiddle.net/MU6H8/3/

body {
text-align: center;
}
body > div {
width: 400px;
margin : 1em auto;
padding-top:40px;
position:relative;
overflow:hidden;
}
body>div:before {
content :'';
position:absolute;
top:0;
left:0;
right:0;
height:40px;
border-bottom-left-radius: 200px 40px;
border-bottom-right-radius: 200px 40px;
transition:background 0.5s;
background: orange;
box-shadow: 0 0 0 2000px purple
}
div div {
width: 400px;
height: 100px;
position:relative;
background:purple
}
body:hover> div:before {
background:none;
}
body {
background:url(http://lorempixel.com/100/100/abstract);
}

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

ответил(а) 2014-03-15T14:43:00+04:00 7 лет назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема