滑塊點 - CSS3歪斜斜他們

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

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>

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

來源

2016-09-07 The Old County

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

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

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

您可以用絕對位置

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>

來源

2016-09-07 19:48:53

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

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

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

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

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>

來源

2016-09-07 20:10:55 vals

滑塊點 - CSS3歪斜斜他們

回答

相關問題