Изогнутая угловая граница для div

Мне нужно создать div с изогнутой угловой границей, без использования каких-либо изображений в углу. Является ли это возможным?

Я не хочу вставлять изогнутые изображения в угол, пожалуйста, помогите мне в этом.

12.12.2008 06:29:02
проверьте этот пост - очень простой кросс-браузерный код CSS3.
Shahar 12.06.2012 16:51:16
5 ОТВЕТОВ

http://www.curvycorners.net/

Попробуйте эту библиотеку, она сделала чудеса для меня! Это проверенное кросс-браузерное решение.

7
12.12.2008 06:34:17
Этот сайт, кажется, не работает . Последнее обновление проекта было в марте 2011 года. Проект размещен на Google Code .
Fernando Correia 19.11.2012 23:47:10

Вы можете использовать CSS для достижения закругленных углов в современных браузерах ...

border-radius: 10px;

Удобный генератор

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

6
8.12.2011 22:18:18

Если вы хотите использовать браузеры webkit и mozilla, вы можете использовать следующие команды css:

.radius {
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
    }

Подробности можно посмотреть здесь .

Информацию о CSS-спецификации border-radius можно найти здесь

Это, к сожалению, не работает для т.е.

Вы могли бы пройти путь JavaScript для IE только с помощью niftycube, который имеет дополнительное преимущество, заключающееся в поддержке выравнивания высоты столбцов без проблем.

9
12.12.2008 06:42:57

Вот тот, который я написал, который вы можете использовать, если вам это нравится. Он отображает прямоугольник с закругленными углами любых размеров с цветом фона, но не с рамкой вокруг всего прямоугольника. Это для фонов белой страницы, но это можно изменить, отредактировав цвет границы в стилях c1, c2 и c3.

.rounded {background-color:#f1f0f1}
.rounded .inner {padding:8px 10px 8px 12px}
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px}


   <div class="rounded" style="width:200px;height:100px">
    <div class="c1"></div><div class="c2"></div><div class="c3"></div>
        <div class="inner">
        -- Content Here --
        </div>
        <div class="c3"></div><div class="c2"></div><div class="c1"></div>
   </div>
0
12.12.2008 17:56:18

Я бы использовал плагин jQuery для обработки закругленных углов. Вот список доступных плагинов с закругленными углами на сайте jQuery: http://plugins.jquery.com/taxonomy/term/189

-2
12.12.2008 18:02:29