Skip to content

Instantly share code, notes, and snippets.

@Hazantip
Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hazantip/3304a336ec1995bc1438 to your computer and use it in GitHub Desktop.
Save Hazantip/3304a336ec1995bc1438 to your computer and use it in GitHub Desktop.
CSS Pattern

CSS Pattern

Mountains ornament

It became like this after transformed from rhombus. Just add background-position for first two gradients.

A Pen by Viacheslav on CodePen.

License.

<html>
<head>
<title>Mountains ornament</title>
<meta charset="utf-8">
</head>
<body>
<div class="pattern"></div>
</body>
</html>
.pattern {
height: 100%;
background-image:
linear-gradient(135deg, white 25%, transparent 25%),
linear-gradient(225deg, white 25%, transparent 25%),
linear-gradient(45deg, white 25%, transparent 25%),
linear-gradient(315deg, white 25%, transparent 25%);
background-position:
25px 0,
25px 0,
0 0,
0 0;
background-size: 50px 50px;
background-repeat: repeat-x;
background-color: #333;
}
html, body {
height: 100%;
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment