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

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

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

Ответ 1

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

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

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

информация о граничном радиусе CSS2 spec может быть найдена здесь

К сожалению, это не работает.

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

Ответ 2

http://www.curvycorners.net/

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

Ответ 3

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

border-radius: 10px;

Handy Generator

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

Ответ 4

Здесь я написал, что вы можете использовать, если вам это нравится. Он отображает прямоугольник с закругленными углами любых размеров с цветом фона, но не рамкой вокруг всей коробки. Это для белых фоновых страниц, но это можно изменить, отредактировав цвет рамки в стилях 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>

Ответ 5

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