CSS：如何在同一元素上創建垂直和水平網格？

-1

PLAYGROUND HERECSS：如何在同一元素上創建垂直和水平網格？

HTML：

<div class="vertical-grid"> 
</div>

CSS：

.vertical-grid { 
    background-size: 20px 100%; 
    background-image: linear-gradient(to right, 
            black 0%, 
            transparent 5%, 
            transparent 100%); 
}

enter image description here

Horizontal grid can be achieved by:

HTML：

<div class="horizontal-grid"> 
</div>

CSS：

.horizontal-grid { 
    background-size: 100% 10px; 
    background-image: linear-gradient(to bottom, 
            black 0%, 
            transparent 7%, 
            transparent 100%); 
}

enter image description here

這有可能有相同的元素在兩個網格？

HTML：

<div class="vertical-grid horizontal-grid"> 
</div>

CSS：

[Enter your answer here]

enter image description here

PLAYGROUND HERE

來源

2014-10-03 Misha Moroshko

試試這個 - http://jsfiddle.net/dx30bry0/ – Anonymous 2014-10-03 03:01:57

您可以在單個元件上使用多個背景，閱讀手冊頁。 – Nit 2014-10-03 03:08:55

@MaryMelody你的想法很好，但它會導致'div'的內容在外面：http://jsfiddle.net/nxcdgnvg/ – 2014-10-03 03:10:41

這裏使用多個backgrou一個可能的解決方案NDS：

.vertical-grid.horizontal-grid { 
    background-size: 20px 100%, 100% 10px; 
    background-image: linear-gradient(to right, 
            black 0%, 
            transparent 5%, 
            transparent 100%), 
        linear-gradient(to bottom, 
            black 0%, 
            transparent 7%, 
            transparent 100%); 
}

DEMO

來源

2014-10-03 03:37:09

CSS：如何在同一元素上創建垂直和水平網格？

回答

相關問題