2016-09-07 80 views
0

enter image description here滑塊點 - CSS3歪斜斜他們

有動態使滑塊點傾斜的斜切面的CSS3的方式?

https://jsfiddle.net/9dtgqw95/5/

span { 
 
    background: red; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 15px; 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
} 
 
span:nth-child(n) { 
 
    margin-top: 15px; 
 
}
<div> 
 
    <span></span><span></span><span></span> 
 
</div>


如果容器旋轉 - 將定位問題,如果有更多的點

enter image description here

+0

怎麼樣旋轉扭曲點推整個容器https://jsfiddle.net/9dtgqw95/6/? – DaniP

+0

這是一個想法 - 我想 - 我試圖看到扭轉圓點的另一種方式 –

+0

@DaniP - 它是接近的 - 但如果有更多的點 - 然後可能有問題 - 底部:20px等.. –

回答

0

您可以用絕對位置

div {position:relative;} 
 
span { 
 
    background: red; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 15px; 
 
    display: inline-block; 
 
    position: absolute; 
 
    top:0; 
 
} 
 
span:nth-child(2) { 
 
    top: 15px; 
 
    left: 15px; 
 
} 
 
span:nth-child(3) { 
 
    top: 30px; 
 
    left: 30px; 
 
}
<div> 
 
    <span></span><span></span><span></span> 
 
</div>

+0

來標記這個問題 - 讓我們用多個不同的點來測試一下 - 看看解決方案是否具有普遍性 –

+0

那麼你可以把它當成你想要的第n個孩子。沒有什麼不好的事情發生,如果他們不使用:) –

+0

我的意思是 - 如果你有多個滑塊 - 不同數量的點 - 你的絕對底部可能無法滿足它 –

0

可以扭曲容器以相反的方式

div { 
 
    transform: skewY(45deg); 
 
    transform-origin: left top; 
 

 
} 
 

 
span { 
 
    transform: skewY(-45deg); 
 
    background: red; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 15px; 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
} 
 

 
span:nth-child(n) { 
 
    margin-top: 15px; 
 
}
<div> 
 
    <span></span><span></span><span></span> 
 
</div>