LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Single element shapes with gradients

It's easy to make CSS shapes with solid colors by using borders, but it's more difficult to make them with gradient backgrounds. The main trick is to use pseudo elements and overflow:hidden to cut out the desired shape. There are many more shapes that this technique could be applied to include many listed here, but I didn't include them for brevity.

Special thanks to Ana Tudor because I took several of these shapes directly from her.

This is the base.

Added a little skew and scaled down the Y to keep in the correct proportions.

Similar as above, but with the rhombus rotated and cut off using a pseudo element.

Exactly the same as above, but with the translate(50%) taken out. For a parrallelogram cut this in half by covering it up with a pseudoelement or something similar.

The same technique, but using a hexagon.

Shape outlines

Even harder than that is it to make shapes with outlines. This is because gradients don't like to for to their shape and we cannot really use

Our new base.

Nothing new so far

Here's where it gets interesting. The most practical way I've found to make a bordered triangle is to make two triangles and layer them, either using the conventional border trick (which I use here for ease) or by using Ana Tudor's transform with overflow:hidden trick like I did above. With that being said, I did come up with an extremely impractical way using box shadows that doesn't use pseudo elements.

Sadly only shapes that can be made using one pseudo element can be done using this technique in one element. Using two elements any shape can have a border though

And that about wraps up what I have to offer on the subject. There are probably some ghetto tricks like I linked above to do similar things, but if there is a cleaner approach for one of these please don't hesitate to comment!

Follow me on Twitter or here on CodePen to stay updated with more projects of mine. You can also view this post on my blog.

CSS
/* Gradient styling */
.gradient { /* Our base */
  width:200px;
  height:200px;
  background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
  margin:0 auto;
  margin-top:50px;
}
.rhombus {
  transform:skew(-30deg) scaleY(.8666); /* .8666 = cos(30deg) */  
}
.triangle, .octagon {
  background:transparent;
  /* comment to see rectangle */ overflow: hidden; /**/
  margin: 0 auto;
  /* uncomment to see rhombus * outline: solid 1px red; /**/
  width: 8.66em; /* height*sqrt(3)/2 */ height: 10em;
  transform: rotate(-90deg) skewY(30deg);
}
.triangle:before, .octagon:before, .octagon.border:after {
  display: block; /* to be able to apply width/ height/ transform */
  width: inherit; height: inherit;
  transform: skewY(-30deg) rotate(60deg) translate(50%);
  background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
  background-size: cover;
  content: '';
}
.triangle { transform:translateX(-50px) rotate(-90deg) skewY(30deg); }
.octagon:before { transform: skewY(-30deg) rotate(60deg) translate(0); }
.hexagon {
  position: relative;
  overflow: hidden;
  background:transparent;
  /* add slash at the end of line to see the rhombus *
  outline: solid 1px red;/**/
  width: 10em; height: 10em;
  transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}
.hexagon:before {
  position: absolute;
  right: 6.7%; bottom: 0; left: 6.7%; top: 0;
  transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
  background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
  content: '';
}

/* Border styling */
.rectangle.border, .rhombus.border {
  background: teal;
  box-shadow: inset 0 0 0 10px black;
}
.triangleBorder {
  position:relative;
  margin:0 auto;
  width: 200px;
  height: 200px;
}
.triangleBorder:before, .triangleBorder:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  top: 50%;
  left: 50%;
}
.triangleBorder:before {
  margin-top: -100px;
  margin-left: -100px;
  border-width: 200px 100px 0 100px;
  border-color: black transparent transparent transparent;
}
.triangleBorder:after {
  margin-top: -90px;
  margin-left: -80px;  
  border-width: 165px 80px 0 80px;
  border-color: teal transparent transparent transparent;
}
.parrallelogram {
  margin:0 auto;
  position:relative;
  border-bottom: 100px solid black;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 100px;
}
.parrallelogram:before {
  content:'';
  position:absolute;
  top:10px; left:-70px;
  border-bottom: 80px solid teal;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  height: 0;
  width: 80px;
}

/* Demo styling */
body { background:rgb(244, 244, 244); }
h2 { text-align:center; }
p { max-width:900px; font-size:20px; margin:0 auto; padding:30px; text-align:center; }
a { text-decoration:none; color:teal; }
JS
// For more check out zachsaucier.com

Description

A short post demoing some irregular CSS shapes with gradients and outlines
Term
Wed, 11/29/2017 - 13:48

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv