Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как заверстать фигуру? (https://javascript.ru/forum/xhtml-html-css/48386-kak-zaverstat-figuru.html)

iis_ 02.07.2014 00:14

Как заверстать фигуру?
 
Вложений: 1
Всем привет! Подскажите по опыту те, кому доводилось верстать неправильные фигуры.
Нужно заверстать фигуру во вложении или что-то подобное без использования изображений и canvas-а. Желательном чистым css.
Кто что может посоветовать?
Фигура нужна для построения столбикового графика. Возможно дугу сделать немного другой, но похожей.
Заранее спасибо!

Aetae 02.07.2014 00:27

Первый совет - прописать дизайнеру в щщи с вертушки.

А далее зависит от того что за фигура, будет ли она на одноцветном фоне или на рисунке, должна ли она обрезать содержимое итд.

kobezzza 02.07.2014 10:39

почему нельзя использовать SVG? Ну, а если только CSS, то на box-shadow технике можно сделать, как сделали здесь: http://cssdeck.com/labs/mona-lisa-with-pure-css, а тут либа которая конвертит картинку в CSS: https://github.com/jaysalvat/image2css

iis_ 02.07.2014 12:17

Вложений: 1
Цитата:

Сообщение от Aetae (Сообщение 319092)
зависит от того что за фигура, будет ли она на одноцветном фоне или на рисунке, должна ли она обрезать содержимое итд.

Цитата:

Сообщение от kobezzza (Сообщение 319124)
почему нельзя использовать SVG?

Должна быть расширяемая контролируемая css-ом фигура.
В конечном итоге должно получиться так:

kobezzza 02.07.2014 13:49

Ну SVG тут идеально подойдёт, его даже можно как DATA:URI прям в CSS запихнуть, если принципиально важно редактирование через CSS.

Aetae 02.07.2014 13:58

Элемент с 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 02.07.2014 15:26

Также прошу заметить - кривенькая загогулина из первого поста имеет мало отношения к явным отрезкам правильной окружности из картинки.:)
Впредь сразу давайте нормальную картинку.

iis_ 02.07.2014 16:10

Цитата:

Сообщение от Aetae (Сообщение 319148)
Элемент с border-radius, обрезанный сверху overflow:hidden, закрытый слева следующим.

Круто! Спасибо огромное!!:thanks:

MallSerg 02.07.2014 20:11

Aetae по моему можно проще это сделать без оберток и абсолютного позиционирования

Aetae 02.07.2014 20:25

MallSerg, там много что можно улучшить. Те же классы наполовину лишние.
Это пруф оф концепт на коленке, не верстать же мне за тс полноценную реализацию.)

MallSerg 02.07.2014 20:37

Но задачка интересная =)
<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>

Aetae 02.07.2014 20:45

MallSerg, ты картинку нарисовал, а моём же случае это именно вёрстка которую можно забить контентом.)
Ну и макету тс не соответствует ибо наклон всегда одинаков.(а ещё сверху видны косяки с тенью:) ).
Но практикуйся дальше - это увлекает.)

MallSerg 03.07.2014 00:58

Это не картинка а сверстанные дивы честное пионерское =) и их тоже можно забить контентом.
Столбики сверстаны одним блоком а значит на порядо проще найти свойство которое отвечает за границу или тень + можно легко навесить вау ховер эффекты.

Это не косяки с тенью это художественный ход и изящные штрихи :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.