滑块点 - 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歪斜斜他们

回答

相关问题