Question

我的要求是在html页面上应该有一个梯形桶，它应该充满滴（图像）。 drop的数量存储在javascript变量中。

我已经尝试过以下代码，但这不合适。问题是小的50px乘50px的div（下降）应该均匀地填充梯形，即在底部它们应该是每行4个然后当我们上升时每行的div应该增加但是它们不会增加。如果可以使用html或使用其他合适的工具，我们可以建议吗？任何建议都欢迎。

<!DOCTYPE html>
    <style type="text/css">
    *, *:before, *:after{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    } 
    .css-shapes-preview{ 
    position: relative; 
    height: 63px; 
    width: 281px; 
    padding: 0px; 
    -webkit-transform: rotate(180deg) skew(0deg); 
    transform: rotate(180deg) skew(0deg); 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    border-bottom: 300px solid #428BCA; 
    }
    </style>
    <div class="css-shapes-preview">
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
        <div style="height:50px;width:50px;border:1px solid black;float:left"> </div>
</div>

带有小div的梯形均匀填充

0 个答案: