मैं सीएसएस के साथ एक लंबवत समयरेखा पर काम कर रहा हूं, क्या कोई भी मदद कर सकता है। बायां हिस्सा भीड़ हो रही है। बाएं भाग सूचक सर्कल विपरीत के साथ ओवरलैप किया गया है। इसे केवल सीएसएस के साथ बनाने की कोशिश कर रहा है। क्या कोई जावा-स्क्रिप्ट है जिसे हम इसे काम करने के लिए जोड़ सकते हैं।सीएसएस केवल लंबवत टाइमलाइन
कोड:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type='text/css'>
.line {
width:930px;
margin:0 auto;
}
.line div {
width: 408px;
background-color:#ffffff;
border:solid 1px #B4BBCD;
min-height:35px;
text-align:justify;
word-wrap:break-word;
list-style:none;
}
.ci {
position:relative;
float:right;
}
.cl {
position: relative;
text-align:right;
}
.ci, .cl span {
padding:10px;
}
.line:before {
content: "";
position: absolute;
top: 0;
left: 50%;
}
.ci:before, .cl:after, .ci span:before, .cl span:after {
content: "";
position: absolute;
top: 0;
left: 0;
}
.line:before {
width: 3px;
top: -20px;
bottom: -20px;
background:#000;
}
.ci:before {
width: 5px;
height: 5px;
border: 3px solid #CCC;
border-radius: 100px;
margin: 10px 0 0 -38px;
box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
background: #000;
}
.ci:hover:before {
background: #090;
}
.ci span:before {
top: 12px;
left: -6px;
width: 9px;
height: 9px;
border-width: 0 0 1px 1px;
border-style: solid;
border-color: #e5e5e5;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
/*gggggg*/
.cl:after {
width: 5px;
height: 5px;
border: 3px solid #CCC;
border-radius: 100px;
margin: 10px 0 0 445px;
background: #000;
}
.cl:hover:after {
background: #090;
}
.cl span:after {
top: 12px;
left: 404px;
width: 9px;
height: 9px;
border-width: 1px 1px 0 0;
border-style: solid;
border-color: #e5e5e5;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
</head>
<body style="overflow:hidden;">
<div class="line">
<div class="ci"><span>one</span></div>
<div class="cl"><span>two</span></div>
<div class="ci"><span>one</span></div>
<div class="cl"><span>two</span></div>
<div class="ci"><span>one</span></div>
<div class="cl"><span>two</span></div>
</div>
</body>
</html>
यह बहुत अच्छा लग रहा है, मैं पर हैं है मैंने अभी एक कलम बनाया है: http://cdpn.io/xzKaB –
लंबे समय के बाद महान उत्तर पहर। @ozzyczech –