CSS Shapes

You might be wondering why you'd want to go to the trouble of making shapes in CSS when it might be easier to do so in actual paint or design software where you can export an image. There are a few reasons.

  • Since you aren't sending image information, just instructions on how to make an iamge, you are sending much less information. As a result the images should load much, much faster.
  • When a user changes the zoom within their browser a CSS shape will remain sharp around the edges. With rasterized images you might experience aliasing or blurring when zooming in or out.
  • If you want overlapping elements you can use transparency channels in your image, but this will also increase their size. Round or angled CSS elements are transparent on their own.

None the less, there are a few IMPORTANT things to remember when dealing with CSS shapes.

  • The "outline" property will apply to transformations but will not apply to box-radius changes. It will only display square angles. Use the "border" property to trace strokes around curved rectangles.
  • Just because a CSS shape has an angle or curve that reveals objects behind it doesn't mean you can click on those objects. CSS shapes always exist within rectangle shaped area regardless of their appearance.

    But then so do images. Just create shapes with the intention of not being able to click "through" their transparent areas.

Many more interesting "compound" shapes can be made by combining the below styles, but we'll stick to shapes that can be made within a single style entry for now.

Simple Shapes

For expanded descriptions of the style properties, see the style properties page.

Squares & Rectangles

.square {
    width:100px; 
    height:100px; 
    border:1px solid black; 
    background:lightblue;
}

Circle

The "border-radius" property will define a curved corner. In this case "50%" is just shorthand for half the object width. We could just as easily put "20px" for the border-radius and get a box with rounded corners.
.circle {
    width:100px; 
    height:100px; 
    border-radius: 50%;
    border:1px solid black; 
    background:lightblue;
}

Ovals

Even though the value of the border-radius below is written like a ratio, remember CSS can not do mathematical operations. This is merely denoting the x and y direction values for each corner.
.oval {
    width:200px; 
    height:100px; 
    border-radius: 100px / 50px;
    border:1px solid black; 
    background:lightblue;
}

Rounded Box

There are a few ways to define curved corners. Here we write them out individually.
.box_rounded {
    width:200px; 
    height:100px; 
    
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    
    border:1px solid black; 
    background:lightblue;
}

Curved corner

Remember that "border-radius" alone can take between 1 to 4 values, one for each corner. With that we can curve only one, two or three corners if we wish. Again the "/" symbol just denotes the presence of X & Y, it counts as one value;
.curved_corner {
    width:200px; 
    height:100px; 
    border-radius: 
    	100px / 50px 0px 0px 0px;
    border:1px solid black;
    background:lightblue;
}

Pill shape

Shortening the measurements in one direction will give us a pill shape.
.pill {
    width:200px; 
    height:80px; 
    border-radius: 40px / 40px;
    border:1px solid black; 
    background:lightblue;
}

Half Circle

A simple half circle. We can face it in any four directions by changing the places of the "0px" and "100px" in the border radius. We could also create a quarter circle by entering three "0px" values.
.circle_half {
    height:100px;
    width:50px;
    border-radius: 0px 100px 100px 0px;
    border:1px solid black;     
    background:lightblue;
}

Quarter Circle

Similar set up to the half circle. Just make sure to adjust the width or height accordingly.
.circle_quarter {
    height:100px;
    width:50px;
    border-radius: 0px 0px 100px 0px;
    border:1px solid black;     
    background:lightblue;
}

Angled sides

When most browsers draw the place where two border lines meet they draw an evenly cut edge. We can take advantage of this to create angled sides and make various shapes from them. The process always starts like this.

This first square shows how borders, when made thicker, will "bevel" at diagonal angles.
The second shows what happens when we set the height and width values to zero.
All that's left is to set the two touching borders to transparent colors (we don't even need the top), and change the border thickness as needed.

One drawback is that because angled shapes ARE borders, we can not add borders to them. We also can not add outlines to them, or at least, not to the angled side. One of the trapezoids below has had an outline added to it to show the effect of what happens when you do.

Triangle

.triangle_up {
    width:0; 
    height:0; 
    border-bottom:100px solid lightblue;
    border-left:50px solid transparent;
    border-right:50px solid transparent; 
}

Right Angle

As you can see by the styling properties, this is actually two triangles close together.
.triangle_up_left {
    width:0; 
    height:0; 
    border-right:50px solid transparent;
    border-top:50px solid lightblue;
    border-left:50px solid lightblue;
    border-bottom:50px solid transparent;
}

Trapezoid

The second trapezoid is accomplished by changing "border-bottom" to "border-top". (It also exemplifies the problem of adding an outline to an angled side).
.trapezoid {
    width:100px; 
    height:0; 
    border-bottom:100px solid blue;
    border-left:60px solid transparent;
    border-right:60px solid transparent; 
}

Ribbon

This shape reminds us that you can assign different colors to each border to create objects of two tones.
.ribbon {
    width:0; 
    height:100px; 
    border-right:50px solid lightblue;
    border-left:50px solid blue;
    border-bottom:30px solid transparent;
}

Pie chart

We can combine the techniques of "border-radius" and transparent borders to simulate pie charts as well. But since the border angles will come in at 45 degree angles in a circle, it's only good for quarter measurements.
.pie {
    width:200px; 
    height:100px; 
    border-radius: 100px / 50px;
    border:1px solid black; 
    background:lightblue;
}

Transforms

Newer browsers have the capability of transforming shapes in various ways. These kinds of transforms have not been completely standardized unfortunately, so each browser might take a different property, typicaly by just using the appropriate prefix (such as "-moz-" or "-webkit-"). For the initial instruction we'll simply use the most common "transform" property..

Most transforms are started in a very simple fashion. They are all values of a single property; "transform". But that property can take many values depending on the kind of transform you want to do.

Transforms can be divided into 2d and 3d versions. We'll stick with the 2d versions for now and look at the 4 main transforms of the 2d version. They are as follows...

  1. Translate
    Translation is similar to "movement". It changes the position of an element on an X (left/right) or Y (up/down) axis. This is typically measured in pixels. So an "X" translation of 200px of course moves the element 200 pixels to the right.
  2. Scale
    An element's scale is basically the size of it, but is based on a percentage of the original size, which has a default value of "1". A value of "1.5" would make the element 150% of the original size.
  3. Rotate
    Rotation of course describes the orientation of an element. In CSS it is measured in degrees.
  4. Skew
    To skew an element is to turn the natural cuboid shape of an HTML element into a parallelogram (or rhombus). The tilt is measured in degrees.

So what does the actual syntax look like?



/* The HTML for these styles will be simple div tags
with the appropriate style references so we won't 
bother writing it.  The CSS will correspond to the
shapes at the right. */

/* The value "translate" is akin to applying a
"left" or "right" property.  Transforms will not 
move the actual element position and only change the
drawn position.  As such "translate" is mainly
useful when coupled with other values as you'll see 
later. */

#square_translate {
	transform:translate(40,40);
	background-color:lightgreen;
}

/* "translate" can either be written in the
two-argument style above or with the single axis
direction version shown here, "translateX".  This
will of course take one number and move the element
along the X axis.  This property also shows how
transforms can take negative values. */

#square_translateX {
	transform:translateX(-40px);
	background-color:yellow;
}

/* Rotation is done in degrees and so needs the 
suffix "deg" after the number. */

#square_rotate {
	transform:rotate(10deg);
	background-color:orange;
}

/* Skewing also takes degrees to define the angle of
the skew. */

#square_skew {
	transform:skew(45deg);
	background-color:red;
}

/* Skews can take two arguments to skew both
directions at once. */

#square_skew_again {
	transform:skew(10deg,10deg);
	background-color:purple;
}

This first box is the unaltered version. The shapes below coorespond to the code to the left.


The key thing to remember is that the transforms executed will come in the same order as the values you use with the property. So if you execute one transform, then another, the second will be based on the orientation of the first.

In other words...

transform: translateX(200px) rotate(45deg);

...will leave the object in a different position than...

transform: rotate(45deg) translateX(200px);

Here the first line will move the element 200 pixels to the right AND THEN rotate the element 45 degrees, while the second line will rotate the element 45 degrees AND THEN move the element based on the new orientation of the element, or towards the lower right at a 45 degree angle.

As you can see below, by applying a translation after a rotation we can make a set of images seem to "rotate" around a center point (after their position property has been set to "absolute"). This is just one example of how elements can be arranged via the "transform" property.

Just be aware that, depending on your browser, code dealing with transforms may not apprecaite being split up. The transform property is a singular whole. This means that you can not write a transform for rotation in a class and then write a transform for translation inline because the second will overwrite the first.

So what kind of shapes can be made from these transform values?

Parallelograms

For the "skew" transform, angling the parallelogram the other way would be as simple as entering a negative number.
.parallelogram {
    width:100px; 
    height:100px; 
    border:1px solid black; 
    background:lightblue;
    transform: skew(30deg);
    -o-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    -webkit-transform: skew(30deg);  
}

Diamonds

Note: Rotation will extend the corners of your shape past the pre-existing square boundaries. This means it will start to clip into other objects. You'll have to define a new margin (the below object has margin top/bottom of 30px).
.diamond {
    width:100px; 
    height:100px; 
    border:1px solid black; 
    background:lightblue;    
    
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Compound Shapes

By combining multiple elements and style entries, we can create slightly more complex shapes.

A lot of these shapes use "before" or "after" conditional selectors. These basically are a way of slipping multiple style classes into a single element so that you don't have to make several divs for one shape.

Also, since some of these include transformed styles, or styles with the position property set to absolute, they may need manually defined margin properties to space them away from other elements.

Stars (Triangle)

The code below can be applied to a single element with a class of "star_six".
.star_six {
	position: relative;
	width: 0px; 
	height: 0px; 
	
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-bottom: 80px solid lightblue;
	
	margin-bottom:30px;
}
.star_six:after {
	position: absolute;
	content:"";
	
	width: 0px; 
	height: 0px; 
	margin: 30px 0 0 -50px;
	
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-top: 80px solid lightblue;	
}

Star (Squares)

Depending on if you use trangles or squares, you can only make stars which have multiples of 3 or 4 for points.

.star_twelve {
	position: relative;	
	height: 100px;
	width: 100px;
	
	background: lightblue;
	
	margin:20px;	
}
.star_twelve:before {
	position: absolute;
	height: 100px;
	width: 100px;
	
	content:"";
	background: lightblue;	
	
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
}
.star_twelve:after {
	position: absolute;
	height: 100px;
	width: 100px;	
	
	content:"";
	background: lightblue;
	
	-moz-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

Hexagon

There are actually four shapesLIGHTS here to show that this particular size fits together. Though if you want an entire area filled with such a pattern, you should apply the method found in the "patterns" section.


.shape_hexagon {
	position: relative;
	
	width:  100px;
	height: 55px;
	
	background: lightblue;	
}
.shape_hexagon:before {
	position: absolute;
	top:    -25px;
	left:   0;
	width:  0;
	height: 0;
		
	content: "";	

	border-left:   50px solid transparent;
	border-right:  50px solid transparent;
	border-bottom: 25px solid lightblue;
}
.shape_hexagon:after {
	position: absolute;
	bottom: -25px;
	left:   0;
	width:  0;
	height: 0;
	
	content: "";	

	border-left:  50px solid transparent;
	border-right: 50px solid transparent;
	border-top:   25px solid lightblue;
}

Star (5 Sides)

Depending on if you use trangles or squares, you can only make stars which have multiples of 3 or 4 for points.


.star_five {
	display: block;
	
	position: relative;
	margin: 60px 0;
	
	color: red;
	width: 0px;
	height: 0px;
	
	border-right: 100px solid transparent;
	border-bottom:70px  solid lightblue;
	border-left:  100px solid transparent;
	
	-moz-transform:    rotate(35deg);
	-webkit-transform: rotate(35deg);
	-ms-transform:     rotate(35deg);
	-o-transform:      rotate(35deg);
}
.star_five:before {
	display: block;
	position: absolute;
	
	height: 0;
	width: 0;
	top: -45px;
	left: -65px;
	
	content: '';
	
	border-bottom:80px solid lightblue;
	border-left:  30px solid transparent;
	border-right: 30px solid transparent;
	
	-webkit-transform: rotate(-35deg);
	-moz-transform:    rotate(-35deg);
	-ms-transform:     rotate(-35deg);
	-o-transform:      rotate(-35deg);

}
.star_five:after {
	display: block;
	position: absolute;
	
	top: 3px;
	left: -105px;
	width: 0px;
	height: 0px;
	
	content: '';
	
	color: red;
	border-right: 100px solid transparent;
	border-bottom:70px  solid lightblue;
	border-left:  100px solid transparent;
	
	-webkit-transform: rotate(-70deg);
	-moz-transform:    rotate(-70deg);
	-ms-transform:     rotate(-70deg);
	-o-transform:      rotate(-70deg);
}

Octagon

Some shapes, like the octagon, will require you to carefully adjust all measurements to change the scale of the shape. These styles can also be applied to one element with a class of "octagon".
.octagon {
	position: relative; 
	width: 100px; 
	height: 100px; 
	background: lightblue;
}
.octagon:before {
	position: absolute; 
	width: 40px;
	height: 0;	
	content:"";
	
	border-bottom: 30px solid lightblue;
	border-left: 30px solid white; 
	border-right: 30px solid white; 
}
.octagon:after {
	position: absolute; 
	height: 0;
	width: 40px;
	content:"";
	margin: 70px 0 0 0;
	
	border-top: 30px solid lightblue; 
	border-left: 30px solid white;  
	border-right: 30px solid white; 	
}

Magnifying Glass

Search. Search here.
.shape_magnify {
	position: relative;
	width: 0.3em;
	height: 0.3em;
	
	margin:auto;
	margin-bottom:0.15em;
	
	/* We can actually control the 
    size of everything. */
	font-size: 10em; 
	
	border: 0.1em solid lightblue;	
	border-radius: 1em;
}
.shape_magnify:before {
	position: absolute;	
	content: "";
	width: 0.30em;
	height: 0.08em;	
	right: -0.25em;
	bottom: -0.1em;
	
	background: lightblue;
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

Speech bubble

Bamf!
.dialogue {
	position: relative;
	width: 150px; 
	height: 50px; 
	background: lightblue;
	
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;
}
.dialogue:before {
	position: absolute;	
	width: 0;
	height: 0;
	content:"";   
	margin: 50px 00px 0 90px;
	
	border-top: 30px solid lightblue;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
}

Speech bubble (Outline)

It is possible to simulate outliwnes by just using two sets of each shape, one larger than the other.
Text within dictates the size.
Text within dictates the size.
.bubble_stroke {
	position: relative;
	width:150px;	
	height:50px;
	margin-bottom:35px;
	
	border-radius:20px;
	border: 5px solid black;
	background: lightblue;	
}
.bubble_stroke:before,
.bubble_stroke:after {
	position: absolute;
	top: 100%;
	left: 50%;
	height: 0px;
	width: 0px;	
	content: " ";

	border: solid transparent;
}

.bubble_stroke:after {
	margin-left: -20px;
	
	border-width: 20px;	
	border-color: transparent;
	border-top-color: lightblue;
}
.bubble_stroke:before {
	margin-left: -27px;
	border-width: 27px;
	border-color: transparent;
	border-top-color: black;	
}

Heart

Aw....
.heart { 
	position: relative;
}
.heart:before, .heart:after {
	position: absolute;
	
	left: 70px; top: 0;
	width: 70px;
	height: 115px;
	content: "";
	
	background-color: lightblue;
	
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.heart:after { 
	left: 0; 
	
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin :100% 100%;
}

Pentagon

Essentially just a trapezoid and a triangle together.
.pentagon {
	position: relative;
	width: 54px;
	
	margin-top:35px;
	
	border-width: 50px 18px 0;
	border-style: solid;
	border-color: lightblue transparent;
}
.pentagon:before {
	position: absolute;
	height: 0;
	width: 0;
	top: -85px;
	left: -18px;
	content: "";
	
	border-width: 0 45px 35px;
	border-style: solid;
	border-color: 
    	transparent transparent lightblue;
}	

Infinity Symbol

Infinity Symbol
.shape_infinity {
    position: relative;
    width:  212px;
    height: 100px;
}

.shape_infinity:before,
.shape_infinity:after {
	position: absolute;	
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
	
	content: "";
	
    border: 20px solid lightblue;
	
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.shape_infinity:after {
    left: auto;
    right: 0;
	
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

Patterns

While it is possible to create intricate patterns using nothing but pure CSS it makes use of very complex instructions that can be hard to create from scratch.

Truthfully, more often then not, it will be more effecient for any given designer / artist to create a pattern in a dedicated art progroam like Adobe Photoshop or Illustrator and tile the image as a background image (see the "Images" section for more information on how to do this).

Nonetheless it's good to know about the possibility. Below are some pure CSS patterns that can be found on a CSS3 Pattern Gallery collected by Lea Verou.

Here are just a few...


background-color:silver;
background-image: 
radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 0    150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 50%  100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
radial-gradient(circle at 0    50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:100px 50px;
Arrows by Jeroen Franse

background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;
Carbon fibre by Atle Mo & Lea Verou

background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

background: 
radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0,
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0,
radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px,
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px,
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%),
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%),
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%) 50px 50px,
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%) 50px 50px;
background-color:#63773F;
background-size:100px 100px;

background-color:#556;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
Tartan by Marta Armada

background-color: hsl(2, 57%, 40%);
background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);

background-color:#269;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px