02.07.2014, 00:14
|
|
Интересующийся
|
|
Регистрация: 29.01.2014
Сообщений: 14
|
|
|
Как заверстать фигуру?
Всем привет! Подскажите по опыту те, кому доводилось верстать неправильные фигуры.
Нужно заверстать фигуру во вложении или что-то подобное без использования изображений и canvas-а. Желательном чистым css.
Кто что может посоветовать?
Фигура нужна для построения столбикового графика. Возможно дугу сделать немного другой, но похожей.
Заранее спасибо!
Последний раз редактировалось iis_, 02.07.2014 в 00:18.
|
|
02.07.2014, 00:27
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,582
|
|
|
Первый совет - прописать дизайнеру в щщи с вертушки.
А далее зависит от того что за фигура, будет ли она на одноцветном фоне или на рисунке, должна ли она обрезать содержимое итд.
__________________
29375, 35
|
|
02.07.2014, 12:17
|
|
Интересующийся
|
|
Регистрация: 29.01.2014
Сообщений: 14
|
|
Сообщение от Aetae
|
|
зависит от того что за фигура, будет ли она на одноцветном фоне или на рисунке, должна ли она обрезать содержимое итд.
|
|
Сообщение от kobezzza
|
|
почему нельзя использовать SVG?
|
Должна быть расширяемая контролируемая css-ом фигура.
В конечном итоге должно получиться так: |
|
02.07.2014, 13:49
|
 |
Быдлокодер;)
|
|
Регистрация: 19.11.2010
Сообщений: 4,338
|
|
|
Ну SVG тут идеально подойдёт, его даже можно как DATA:URI прям в CSS запихнуть, если принципиально важно редактирование через CSS.
|
|
02.07.2014, 13:58
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,582
|
|
Элемент с border-radius, обрезанный сверху overflow:hidden, закрытый слева следующим.
Примерно так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #99f;
}
.cicle{
border-radius:50%;
background: #ddf linear-gradient(#aaf 80px, #ccf 80px, #ccf 160px, #bbf 160px);
background-size: 100% 240px;
background-position: 0 50%;
background-repeat: repeat-x;
border: 2px solid #99f;
position: absolute;
}
.block{
overflow: hidden;
position: absolute;
bottom:0;
left:-255px;
}
.cicle-6{
width: 1800px;
height: 1800px;
z-index: 10;
left:-904px; /* -(width/2 + border*2)*/
bottom:-800px;
}
.cicle-6-block{
width: 900px;
height: 300px;
}
.cicle-5{
width: 1600px;
height: 1600px;
z-index: 11;
left:-804px;
bottom:-700px;
}
.cicle-5-block{
width: 800px;
height: 350px;
}
.cicle-4{
width: 1400px;
height: 1400px;
z-index: 12;
left:-704px;
bottom:-600px;
}
.cicle-4-block{
width: 700px;
height: 350px;
}
.cicle-3{
width: 1200px;
height: 1200px;
z-index: 13;
left:-604px;
bottom:-500px;
}
.cicle-3-block{
width: 600px;
height: 400px;
}
.cicle-2{
width: 1000px;
height: 1000px;
z-index: 14;
left:-504px;
bottom:-400px;
}
.cicle-2-block{
width: 500px;
height: 410px;
}
.cicle-central{
width: 800px;
height: 800px;
z-index: 15;
left:-420px;
bottom:-308px;
border: 10px solid #99f;
}
.cicle-central-block{
width: 900px;
height:500px;
}
.cicle:after{
content: attr(class);
display: block;
right:0;
top:50%;
height:1.5em;
line-height: 1.5em;
margin-top:-0.75em;
position: absolute;
}
</style>
</head>
<body>
<div class="cicle-6-block block">
<div class="cicle-6 cicle">6</div>
</div>
<div class="cicle-5-block block">
<div class="cicle-5 cicle">5</div>
</div>
<div class="cicle-4-block block">
<div class="cicle-4 cicle">4</div>
</div>
<div class="cicle-3-block block">
<div class="cicle-3 cicle">3</div>
</div>
<div class="cicle-2-block block">
<div class="cicle-2 cicle">2</div>
</div>
<div class="cicle-central-block block">
<div class="cicle-central cicle"></div>
</div>
</body>
</html>
А вообще - svg.
__________________
29375, 35
Последний раз редактировалось Aetae, 02.07.2014 в 15:29.
|
|
02.07.2014, 15:26
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,582
|
|
Также прошу заметить - кривенькая загогулина из первого поста имеет мало отношения к явным отрезкам правильной окружности из картинки. 
Впредь сразу давайте нормальную картинку.
__________________
29375, 35
|
|
02.07.2014, 16:10
|
|
Интересующийся
|
|
Регистрация: 29.01.2014
Сообщений: 14
|
|
|
Сообщение от Aetae
|
|
Элемент с border-radius, обрезанный сверху overflow:hidden, закрытый слева следующим.
|
Круто! Спасибо огромное!!  |
|
02.07.2014, 20:11
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
|
Aetae по моему можно проще это сделать без оберток и абсолютного позиционирования
|
|
02.07.2014, 20:25
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,582
|
|
|
MallSerg, там много что можно улучшить. Те же классы наполовину лишние.
Это пруф оф концепт на коленке, не верстать же мне за тс полноценную реализацию.)
__________________
29375, 35
|
|
|
|
