Hazantip/CSS-Pattern.markdown

## CSS-Pattern.markdown

      
    Raw
  

              CSS-Pattern.markdown
            
          
    CSS Pattern

Shuriken ornament
This is a six triangles.
They became triangles, when add a true deg value
(for example:
45deg - triangle,
135deg - triangle (45+90),
225deg- triangle (135+90)... ),
and add true position value.
A Pen by Viacheslav on CodePen.
License.

  
## index.html
<html>
    <head>
       <title>Shuriken ornament</title>
       <meta charset="utf-8">
    </head>
    <body>
        <div class="pattern"></div>
    </body>
</html>

## style.css
/*
Используемые цвета: #000000 и #555555
Используемые значения background-position для частей сюрикенов:

70px -45px,
-45px -80px,
35px 70px,
-80px 35px,
35px -45px,
-45px 35px
*/

.pattern {
    height: 100%;
    background-size: 115px 115px;
    background-repeat: repeat;
    background-position:
                70px -45px,
                -45px -80px,
                35px 70px,
                -80px 35px,
                35px -45px,
                -45px 35px;
background-image:
linear-gradient(45deg, #555 25px, transparent 25px),
linear-gradient(-45deg, #555 25px, transparent 25px),
linear-gradient(135deg, #555 25px, transparent 25px),
linear-gradient(225deg, #555 25px, transparent 25px),
linear-gradient(45deg, #000 25px, transparent 25px),
linear-gradient(225deg, #000 25px, transparent 25px);
}


body {
    background: url(/assets/course70/bamboo.jpg);
    min-width: 555px;
    min-height: 298px;
}

html, body {
    height: 100%;
    margin: 0;
}
	<html>
	<head>
	<title>Shuriken ornament</title>
	<meta charset="utf-8">
	</head>
	<body>
	<div class="pattern"></div>
	</body>
	</html>
	/*
	Используемые цвета: #000000 и #555555
	Используемые значения background-position для частей сюрикенов:

	70px -45px,
	-45px -80px,
	35px 70px,
	-80px 35px,
	35px -45px,
	-45px 35px
	*/

	.pattern {
	height: 100%;
	background-size: 115px 115px;
	background-repeat: repeat;
	background-position:
	70px -45px,
	-45px -80px,
	35px 70px,
	-80px 35px,
	35px -45px,
	-45px 35px;
	background-image:
	linear-gradient(45deg, #555 25px, transparent 25px),
	linear-gradient(-45deg, #555 25px, transparent 25px),
	linear-gradient(135deg, #555 25px, transparent 25px),
	linear-gradient(225deg, #555 25px, transparent 25px),
	linear-gradient(45deg, #000 25px, transparent 25px),
	linear-gradient(225deg, #000 25px, transparent 25px);
	}



	body {
	background: url(/assets/course70/bamboo.jpg);
	min-width: 555px;
	min-height: 298px;
	}

	html, body {
	height: 100%;
	margin: 0;
	}