如何通过css实现以下图形

时间：2012-12-22 11:45:23

标签： html css css3

在不使用单张图片的情况下开发网站，我确实面临挑战。我将主要使用图标字体，但是对于这个粒子图形，我认为我可以使用div或其他元素，而不是通过css来设置它。给边界或东西......但我发现它并不像我想象的那么容易，我无法实现它。

以下是我需要获得的最终结果：

enter image description here

我对对角线感兴趣，忽略背景。有没有办法在html或css的帮助下复制这些行？

3 个答案:

答案 0 :(得分：5)

您可以使用css background-image: repeating-linear-gradient()

执行您的要求

Lea Verou有一个很棒的画廊：http://lea.verou.me/css3patterns/

您可以修改diagonial-stripes模式并获得所需内容。

答案 1 :(得分：0)

试试这个， http://www.patternify.com/ 你可以像这里一样制作模式，并将其转换为CSS以用于你的背景。

答案 2 :(得分：0)

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
}
相关问题
最新问题