изогнутая граница в css

Question

Я хочу сделать дизайн CSS следующим образом
--------------------- U ----- |
Я не могне нарисуйте точный дизайн здесь.но ширина U-образной формы должна быть увеличена, чтобы соответствовать домашним ссылкам.это возможно?

Answer 1

Трудно точно понять, что вы ищете, только из этого описания. Демонстрация в текстовом режиме не очень хорошо объясняет это: -)

Это может может быть достигнуто с помощью CSS border-radius, но если я правильно интерпретирую ваш запрос, это звучит как довольно сложный макет.

border-radius делает только закругленные углы - то есть четыре угла коробки. Поэтому, если вам требуется более сложный макет, вам нужно иметь несколько прямоугольников со скругленными углами, расположенными соответствующим образом, чтобы получить желаемый эффект.

Вы можете достичь этого, просто закругив углы на коробке контейнера для ссылок на домашнюю страницу / ссылки, о которых вы упомянули. Если это не дает того, что вам нужно, то для меня это звучит так, будто вам нужна графика, а не граница CSS.

Если CSS border-radius действительно работает для вас, имейте в виду, что функция border-radius не поддерживается в IE. Хорошей новостью является то, что в IE есть хак под названием CSS3Pie , который исправляет это, поэтому вы можете использовать border-radius во всех браузерах.

Надеюсь, что это работает для вас.

Answer 2

http://border -radius.com / Генератор граничного радиуса CSS

Answer 3

Вы можете сделать это только с помощью CSS3 , но вместо этого вы можете использовать такие вещи, как элегантные углы .

Answer 4

Вот пример:

<style type="text/css">
div.test
{
width: 115px;
padding: 10px;
border: 2px solid #000;
border-radius: 15px;
-moz-border-radius: 15px;
}
</style>
<div class="test">This is some text!</div>

Answer 5

Если вы хотите сохранить совместимость со старыми браузерами, вы не можете сделать это в css, вам придется делать это с графикой. IE 8 и ниже не будут этого делать, не уверен насчет других браузеров, но имейте в виду, что радиус границы довольно новый.