如何通過css實現以下圖形

我已經給自己設置了一個挑戰，即在不使用單個圖像的情況下開發一個網站。我主要使用圖標字體，但對於這個粒子圖形，我認爲我可以使用div或其他元素，而不是通過CSS等方式進行設置。給出邊界或其他......但我發現它並不像我想象的那麼容易，我無法實現它。如何通過css實現以下圖形

以下是我需要得到的最終結果：

enter image description here

我感興趣的對角線，忽略背景。有沒有辦法在html或css的幫助下複製這些行？

來源

2012-12-22 Ilja

試試這個：http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_rotatez – MarcinJuraszek

嗨，謝謝你，我之前嘗試過，但由於某種原因，它不起作用，這裏是我試過的快速小提琴：http://jsfiddle.net/TVbrU/ – Ilja

Hope this helps you get started..!!Fiddle Demo這裏..

HTML

<body>  
     <div class="myDiv"></div>   
     <div class="myDiv"></div> 
     <div class="myDiv"></div>   
     <div class="myDiv"></div>   
     <div class="myDiv"></div> 
     <div class="myDiv"></div>   
     <div class="myDiv"></div> 
     <div class="myDiv"></div>     
</body>

CSS

.myDiv { 
background-color: none; 
border: solid 2px #AAA; 
margin: 30px; 
height: 5px; 
-webkit-transform: rotateZ(115deg); // Chrome 
-moz-transform: rotateZ(115deg) // Mozilla Firefox 
}

來源

2012-12-22 12:41:29 SidPen

儘管這個鏈接可能回答這個問題，但最好在這裏包含答案的基本部分，並提供參考鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 –

我提到的鏈接不是某人的博客文章其鏈接到jsfiddle.net，我們可以編輯，執行和保存HTML的現場演示，這給了一個更好的解釋.. – SidPen

如果你需要分享只是一個鏈接添加爲評論 –

試試這個， http://www.patternify.com/ U可以在這裏製作模式，並將其轉換爲CSS以用於您的背景。

來源

2012-12-22 11:52:16 5hahiL

請對這個問題作出回答，即使只是根據鏈接發現的內容的總結;不要只是提供一個鏈接到外部網站。堆棧溢出應該是自包含的。 –

@DavidThomas當問這個問題的人太懶惰甚至不想回答時，這是他們應得的。 StackOverflow不應該是一個自由職業者的網站。我們應該鼓勵開發人員幫助他們解決他們無法解決的問題。他們至少應該嘗試一下，這會鼓勵我們寫更有實質性的東西。 :) – 5hahiL

@Shahil這裏真的不尊重你稱我爲懶惰，因爲我嘗試了幾種解決方案，我認爲它應該可以工作，例如， http://jsfiddle.net/TVbrU/我沒有在這裏包括他們，因爲他們沒有工作。 – Ilja

你可以做你問什麼使用CSS background-image: repeating-linear-gradient()

利·貝羅有很大的空間：http://lea.verou.me/css3patterns/

您可以修改diagonial-stripes模式，並得到你想要的。

來源

2012-12-22 12:06:37 Sotiris

如何通過css實現以下圖形

回答

相關問題