Дуги на CSS

[egoregor]

Всем привет.

Каким образом без помощи JS и картинок можно сделать дуги только на HTML и CSS?

[Great Rash]

border-radius

[br3t]

- css3 (не самый лучший вариант)

- canvas

- svg

[NeoXidizer]

http://habrahabr.ru/post/126207/

немного помучиться и все получится )

[egoregor]

http://habrahabr.ru/post/126207/

немного помучиться и все получится )

Во ) Я решил пойти этим путем. Вроде поначалу небо прояснилось, но тут появились новые тучи.

Я решил вставлять треугольники внутрь круга, с overflow:hidden. И увидел, что свойство то не работает. При чем проблемными оказались браузеры safari, chrome и opera, а в других все ок.

То есть overflow не видит там border-radius. Может кто знает, как починить.

На всякий случай привожу код:

#round {
        position: relative;
        width:200px;
        height:200px;
        overflow: hidden;
        border-radius: 200px;
        border: 1px solid black;

    }
    #triangle-left {
        position: absolute;        
        width: 0;
        height: 0;
        border-top: 200px solid transparent;
        border-right: 100px solid red;
        border-bottom: 200px solid transparent;
    }

<div id="round">
        <div id="triangle-left"></div>
    </div>

[alexandr_v-vich]

http://habrahabr.ru/post/126207/

немного помучиться и все получится )

Во ) Я решил пойти этим путем. Вроде поначалу небо прояснилось, но тут появились новые тучи.

Я решил вставлять треугольники внутрь круга, с overflow:hidden. И увидел, что свойство то не работает. При чем проблемными оказались браузеры safari, chrome и opera, а в других все ок.

То есть overflow не видит там border-radius. Может кто знает, как починить.

На всякий случай привожу код:

#round {
        position: relative;
        width:200px;
        height:200px;
        overflow: hidden;
        border-radius: 200px;
        border: 1px solid black;

    }
    #triangle-left {
        position: absolute;        
        width: 0;
        height: 0;
        border-top: 200px solid transparent;
        border-right: 100px solid red;
        border-bottom: 200px solid transparent;
    }

<div id="round">
        <div id="triangle-left"></div>
    </div>

Удивительно то как....никогда не сталкивался с этим...

Первое, что пришло на ум - http://jsfiddle.net/aL3k4/33/

Edited April 6, 2012 by alexandr_v-vich

[egoregor]

Первое, что пришло на ум - http://jsfiddle.net/aL3k4/33/

Спасибо за вариант, но большой бордер может помешать ближнему контенту. Хотя этот способ тоже буду иметь ввиду.

Со своей проблемой частично разобрался. Overflow не срабатывает на блок c border-radius, у которого свойство position отличное от static. Решение: заворачиваем этот блок в другой, которому уже применяем позиционирование. К сожалению у оперы баг так и остался.

хмм... При чем внутренние элементы блока с overflow тоже не должны использовать position. Иначе не будут обрезаться.

Edited April 6, 2012 by egoregor

[alexandr_v-vich]

Первое, что пришло на ум - http://jsfiddle.net/aL3k4/33/

Спасибо за вариант, но большой бордер может помешать ближнему контенту. Хотя этот способ тоже буду иметь ввиду.

Со своей проблемой частично разобрался. Overflow не срабатывает на блок c border-radius, у которого свойство position отличное от static. Решение: заворачиваем этот блок в другой, которому уже применяем позиционирование. К сожалению у оперы баг так и остался.

хмм... При чем внутренние элементы блока с overflow тоже не должны использовать position. Иначе не будут обрезаться.

Да, про статик - интересно.

А по поводу примера, что я привёл. Всмысле по поводу псевдоэлементов - 1 элемент + 2 псевдо = 3 элемента = 1 квадрат, 1 круг и 1 треугольник. Мне просто некогда сейчас, там развейте мысль) (если свой, конечно, вариант не пробъёте)

Edited April 6, 2012 by alexandr_v-vich

[Softlink]

Покажите картинку, что должно получиться в итоге.

[egoregor]

Покажите картинку, что должно получиться в итоге.

Картинки у меня нет, но получиться должна круговая диаграмма.

Грубо говоря такая http://jsfiddle.net/egoregor/Jk3zn/

Плюс там еще будут дуги другого цвета.

[alexandr_v-vich]

Покажите картинку, что должно получиться в итоге.

Картинки у меня нет, но получиться должна круговая диаграмма.

Грубо говоря такая http://jsfiddle.net/egoregor/Jk3zn/

Плюс там еще будут дуги другого цвета.

Да ща забацаем)))

Динамической будет? Всмысле, интерактивной? И сколько дуг? 4? Равномерные? Для чего?

[egoregor]

Да ща забацаем)))

Динамической будет? Всмысле, интерактивной? И сколько дуг? 4? Равномерные? Для чего?

Предполагается не динамическая, но с возможностью изменения дуг, т.к. значения на диаграммах будут отличаться.

Всего 4 дуги.

Не равномерные.

Для показа каких либо характеристик (например процентное соотношение 4 типов упражнений на тренировке).

Буду очень благодарен за помощь )

Хотя для меня, конечно, главное потом еще разобраться в самом методе, а не просто взять готовое решение.

[alexandr_v-vich]

Вот дела, вчера всё чётко представлял - идею, как делать.....наверное ошибался.

Вариантов несколько, но ни один из низ я не хочу развивать и вам рекомендовать, поскольку всегда будет лучше js. Всмысле canvas. Возможностей дофига, да и проще в реализции (если с самой технологией немного разобраться) и в использовании. Если это всё же кажется сложным, тогда или svg или картинку ставьте и вся проблема.

Не для того css нам дан. Или, может, я просто не владею в полной мере этими средствами...в любом случае, помочь вам у меня не вышло =/

[egoregor]

Вот дела, вчера всё чётко представлял - идею, как делать.....наверное ошибался.

Вариантов несколько, но ни один из низ я не хочу развивать и вам рекомендовать, поскольку всегда будет лучше js. Всмысле canvas. Возможностей дофига, да и проще в реализции (если с самой технологией немного разобраться) и в использовании. Если это всё же кажется сложным, тогда или svg или картинку ставьте и вся проблема.

Не для того css нам дан. Или, может, я просто не владею в полной мере этими средствами...в любом случае, помочь вам у меня не вышло =/

Ну ладно. Все равно спасибо.

Конечно, с помощью canvas это сделать просто, но надо без него.

На данный момент я представляю, как это можно сделать, но только на опере баги возникают. Да и сам способ конечно потрепает не слабо.

Edited April 8, 2012 by egoregor

[Softlink]

Допустим, для 4-х равных секторов это можно сделать. Можно даже сделать и для неравных, но смотреться будет не так, как показано у вас на рисунке.

[egoregor]

Допустим, для 4-х равных секторов это можно сделать. Можно даже сделать и для неравных, но смотреться будет не так, как показано у вас на рисунке.

А чтобы сделать неравные части, надо поменять значения clip? И проблемы будут в том, что линии обрезания не будут направлены в центр круга?

[Softlink]

Допустим, для 4-х равных секторов это можно сделать. Можно даже сделать и для неравных, но смотреться будет не так, как показано у вас на рисунке.

А чтобы сделать неравные части, надо поменять значения clip? И проблемы будут в том, что линии обрезания не будут направлены в центр круга?

Именно. По крайней мере мне этого пока не удалось сделать.

[alexandr_v-vich]

http://jsfiddle.net/kuUTH/28/ (смотрите в файрфоксе только — лень было цвета подставлять везде)

Только IE ниже 10ки не канает… (может pie тут выручит, не помню как он там работает)

UPD: А, ну pie же по условию не подходит…

Ну можно и так, а для IE будет прямые углы, придётся подрасчитывать так, чтобы не попадать в угол. Возможны небольшие отклонения в отношениях

Ну и диаграммка

Edited April 9, 2012 by alexandr_v-vich

[alexandr_v-vich]

А!, стойте, так решён же вопрос…

egoregor,

У вас же был вариант сделать с закрытием цветных элементов через круглый внешний бордер

По-моему это

Первое, что пришло на ум - http://jsfiddle.net/aL3k4/33/

Не устраивало только то, что широкий бордер помешает элементам рядом стоящим.

Но Softlink показал вам clip. Вот и всё. Заворачивайте всё в абсолютно позиционированный див, а его в относительно позиционированный див.

Что-то типа этого http://jsfiddle.net/Jk3zn/107/

Как видно, ничего не мешает следующему диву (хотя содержания текста там навалом)

А вот, что будет, если уберём span — http://jsfiddle.net/Jk3zn/109/ (или можете просто clip убрать в первом примере, тот же эффект)

Короче, совмещайте две идеи и будет у вас, что хотите))

UPD: или нет… ща посмотрим…

Так оно и так нормально всё обрезается, не мешая остальному — http://jsfiddle.net/aL3k4/95/

Развивая тему — http://jsfiddle.net/aL3k4/102/ (извиняюсь за перемешанную семантику, не до того было)

ещё пара спанов, круг сверху и всё…

но большой бордер может помешать ближнему контенту

Думал же проверить сразу…

Edited April 9, 2012 by alexandr_v-vich

[alexandr_v-vich]

Что-то не сидится мне), вот пример — http://jsfiddle.net/aL3k4/138/

Некоторые вещи там лишние, что-то не к месту. Факт, что это работает и можно подстраивать любые длины этих дуг. И границы дуг направлены к центру (только это руками надо подделывать уже).

http://jsfiddle.net/aL3k4/141/ (чтобы увидеть, что ничто не чему не мешает позиционироваться дальше)

Edited April 9, 2012 by alexandr_v-vich

[egoregor]

Круто. И нет проблем с браузерами. В код пока что особо не вникал, но думаю проблем не будет.

Спасибо огромное всем, кто помог. Очень благодарен )

Edited April 10, 2012 by egoregor

[egoregor]

Ну и сразу, чтобы не выходить из тематики этих диаграмм. Как их сделать резиновыми по ширине и высоте? То есть при изменении ширины браузера, высота и ширина диаграммы тоже будут пропорционально меняться.