Показать сообщение отдельно
  #11 (permalink)  
Старый 02.07.2014, 20:37
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,138

Но задачка интересная =)
<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, 02.07.2014 в 20:41.
Ответить с цитированием