CSS: границы с отрицательным радиусом

У меня есть вопрос, который я впервые встретил о границах.CSS: границы с отрицательным радиусом

Итак, мне нужно создать подобные границы без каких-либо изображений (если это возможно):

enter image description here То же самое в нижней части страницы

Как вы можете видеть, есть два границы с отрицательным (?) границей. Я знаю, что отрицательный border-radius не будет работать, поэтому я был бы очень признателен, если бы кто-то помог мне с решением.

Я уже пробовал это: The first example, но проблема в том, что я не могу создать нормальные границы - весь блок.

источник

2013-12-06 Artem Ushakov

Вы можете проверить этот плагин jQuery: http://jquery.malsup.com/corner/ У которого есть много других возможностей для оформления границы.

enter image description here

Вы также можете проверить решение, предоставленное Ли Верой. Она использует отрицательный радиус границы с градиентами css3: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

источник

2013-12-06 10:33:35

Прежде чем отвечать, пожалуйста, убедитесь, что задан тот же или подобный вопрос уже задан или нет. – Ravimallya

Я вижу ваш url сейчас, если бы эта закладка забыла сначала искать в стеке, извините. –

, то вы можете удалить этот ответ и попросить вопросителя подойти к этой теме в комментарии. – Ravimallya

Имейте элемент div в качестве обертки и добавьте элементы с div, чтобы служить закругленными углами. Вы можете попробовать добавить углы с границы радиуса на дочерних элементов:

Пример здесь: http://jsfiddle.net/5YS68/

div { 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    z-index: 1; 
    position: relative; 
} 

p { 
    margin: 0; 
    width: 98px; 
    height: 98px; 
    border: 1px solid red; 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 2; 
} 
b.top-right { 
    position: absolute; 
    z-index: 3; 
    background: white; 
    top: -5px; 
    right: -5px; 
    width: 10px; 
    height: 10px; 
    border: 1px solid red; 
    border-radius: 999px; 
} 

b.top-left { 
    position: absolute; 
    z-index: 3; 
    background: white; 
    top: -5px; 
    left: -5px; 
    width: 10px; 
    height: 10px; 
    border: 1px solid red; 
    border-radius: 999px; 
}

Вы также можете использовать :before и :after псевдо элементы для более чистого HTML. Используйте один элемент (с точностью до и после псевдоэлементов, помещенных как абсолютный) для верхних углов, и один элемент для нижних углов

источник

2013-12-06 10:52:01 n1kkou

CSS: границы с отрицательным радиусом

ответ

Смежные вопросы