Как заверстать фигуру?
Вложений: 1
Всем привет! Подскажите по опыту те, кому доводилось верстать неправильные фигуры.
Нужно заверстать фигуру во вложении или что-то подобное без использования изображений и canvas-а. Желательном чистым css. Кто что может посоветовать? Фигура нужна для построения столбикового графика. Возможно дугу сделать немного другой, но похожей. Заранее спасибо! |
Первый совет - прописать дизайнеру в щщи с вертушки.
А далее зависит от того что за фигура, будет ли она на одноцветном фоне или на рисунке, должна ли она обрезать содержимое итд. |
почему нельзя использовать SVG? Ну, а если только CSS, то на box-shadow технике можно сделать, как сделали здесь: http://cssdeck.com/labs/mona-lisa-with-pure-css, а тут либа которая конвертит картинку в CSS: https://github.com/jaysalvat/image2css
|
Вложений: 1
Цитата:
Цитата:
В конечном итоге должно получиться так: |
Ну SVG тут идеально подойдёт, его даже можно как DATA:URI прям в CSS запихнуть, если принципиально важно редактирование через CSS.
|
Элемент с 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. |
Также прошу заметить - кривенькая загогулина из первого поста имеет мало отношения к явным отрезкам правильной окружности из картинки.:)
Впредь сразу давайте нормальную картинку. |
Цитата:
|
Aetae по моему можно проще это сделать без оберток и абсолютного позиционирования
|
MallSerg, там много что можно улучшить. Те же классы наполовину лишние.
Это пруф оф концепт на коленке, не верстать же мне за тс полноценную реализацию.) |
Но задачка интересная =)
<style> .cont { width: 450px; background: rgb(73, 133, 189); overflow: hidden; height: 250px; opacity: 1; } .cont > div { position:relative; float: left; border: 3px solid rgb(73, 133, 189); border-top-right-radius: 100px 90%; border-bottom-right-radius: 30px 30%; margin-top: -23px; margin-left: -50px; width: 117px; height: 320px; background:linear-gradient(to bottom, #86F9B9 0%,#2ef7cf 38%,#2742D1 39%,#2786D1 55%,#1E1E5F 55%,#3F3C93 71%,#2F61CA 71%,#3B27D1 100%); box-shadow: 3px 5px 14px 5px rgba(50, 50, 50, 0.5); } .cont > div:before { content: ""; display: block; background: rgb(73, 133, 189); } .st_001{ z-index: 45;} .st_001:before{height: 25px;} .st_002{ z-index: 44;} .st_002:before{height: 30px;} .st_003{ z-index: 43;} .st_003:before{height: 45px;} .st_004{ z-index: 42;} .st_004:before{height: 65px;} .st_005{ z-index: 41;} .st_005:before{height: 100px;} .st_006{ z-index: 40;} .st_006:before{height: 120px;} </style> <div class="cont"> <div class="st_001">1</div> <div class="st_002">2</div> <div class="st_003">3</div> <div class="st_004">4</div> <div class="st_005">5</div> <div class="st_006">6</div> </div> |
MallSerg, ты картинку нарисовал, а моём же случае это именно вёрстка которую можно забить контентом.)
Ну и макету тс не соответствует ибо наклон всегда одинаков.(а ещё сверху видны косяки с тенью:) ). Но практикуйся дальше - это увлекает.) |
Это не картинка а сверстанные дивы честное пионерское =) и их тоже можно забить контентом.
Столбики сверстаны одним блоком а значит на порядо проще найти свойство которое отвечает за границу или тень + можно легко навесить вау ховер эффекты. Это не косяки с тенью это художественный ход и изящные штрихи :thanks: <style> .cont { width: 450px; background: rgb(73, 133, 189); overflow: hidden; height: 273px; opacity: 1; font-family: aria, sans-serif; font-size: 14pt; color: #B9AFAF; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); } .cont > div { position:relative; cursor:pointer; float: left; border: 3px solid rgb(73, 133, 189); border-top-right-radius: 100px 90%; border-bottom-right-radius: 30px 30%; margin-left: -50px; width: 117px; height: 320px; background:linear-gradient(to bottom, #86F9B9 0%,#2ef7cf 38%,#2742D1 39%,#2786D1 55%,#1E1E5F 55%,#3F3C93 71%,#2F61CA 71%,#3B27D1 100%); box-shadow: 3px 5px 14px 5px rgba(50, 50, 50, 0.5); } .cont > div > div{ position: absolute; top: 128px; left: 50px; } .cont > div:hover { box-shadow: 3px 5px 14px 5px rgba(252, 238, 0, 0.4),inset 3px 5px 14px 10px rgba(252, 238, 0, 0.5); border-right-color: rgb(245, 255, 0); color: #FFFFFF; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1); transition: box-shadow 2s ease,border 1s ease; } .cont > div:before { content: ""; display: block; background: rgb(73, 133, 189); } .st_001{ z-index: 45;} .st_001:before{height: 25px;} .st_002{ z-index: 44;} .st_002:before{height: 30px;} .st_003{ z-index: 43;} .st_003:before{height: 45px;} .st_004{ z-index: 42;} .st_004:before{height: 65px;} .st_005{ z-index: 41;} .st_005:before{height: 100px;} .st_006{ z-index: 40;} .st_006:before{height: 120px;} </style> <div class="cont"> <div class="st_001"></div> <div class="st_002"> <div> <b>text 1</b><br> <i>text 2</i> </div> </div> <div class="st_003"> <div> <b>text 1</b><br> <i>text 2</i> </div> </div> <div class="st_004"> <div> <b>text 1</b><br> <i>text 2</i> </div> </div> <div class="st_005"> <div> <b>text 1</b><br> <i>text 2</i> </div> </div> <div class="st_006"> <div> <b>text 1</b><br> <i>text 2</i> </div> </div> </div> |
Часовой пояс GMT +3, время: 14:08. |