CSS Shield

CSS-Shield.markdown

CSS Shield

A shield shape with one DOM element.

A Pen by Jeff S. on CodePen.

License.

index.html

<section class="shield-test-container">
    <ul class="got-shields">
        <li class="shield test"></li>
        <li class="shield"></li>
        <li class="shield red"></li>
        <li class="shield blue"></li>
        <li class="shield green"></li>
    </ul>
</section>

script.js

/* Notes 

THE PROBLEM

Creating a shield shape with CSS is no easy task.  Using circle border radius values creates perfectly rounded corners.  Using ellipse border radius values creates elliptical corners.  Neither method allows for a curved corner that tapers into a "V" point.

THE SOLUTION

CSS gives us the ability to instantiate :before and :after pseudo-elements on any object in the DOM.

1) Create a box.
2) Create a dome-shaped :before pseudo-element.
3) Rotate it (I like 20°).
4) 

*/

style.css

.shield-test-container {
  padding: 1em;
  margin: 1em;
  width: auto;
}
.got-shields {
  width: 100%;
  position: relative;
}
.got-shields li {
  display: inline-block;
  position: relative;
  margin: 0 0.5em;
}
.shield {
  border: none;
  position: relative;
  width: 10em;
  height: 10em;
  background: gold;
}
.shield:before,
.shield:after {
  border: none;
  content: "";
  background: gold;
  border-radius: 0;
  border-top-right-radius: 100% 100%;
  border-bottom-right-radius: 125% 100%;
  width: 6.275em;
  height: 6em;
  transform-origin: bottom left;
  transform: scale(1, 1) translateX(-80%) rotate(-20deg);
  position: absolute;
  bottom: -42.5%;
}
.shield:after {
  transform: scale(-1, 1) translateX(80%) rotate(-20deg);
}
.shield.test,
.shield.test:before,
.shield.test:after {
  background: rgb(127,127,127);
}
.shield.common,
.shield.common:before,
.shield.common:after {
  background: lightgrey;
}
.shield.uncommon,
.shield.uncommon:before,
.shield.uncommon:after {
  background: green;
}
.shield.rare,
.shield.rare:before,
.shield.rare:after {
  background: steelblue;
}
.shield.legendary,
.shield.legendary:before,
.shield.legendary:after {
  background: DarkViolet;
}
.shield.exotic,
.shield.exotic:before,
.shield.exotic:after {
  background: gold;
}

style.less

.shield-test-container {padding:1em; margin:1em; width:auto;}
.got-shields {width: 100%; position: relative;}
.got-shields li {display:inline-block; position: relative; margin:0 0.25em;}
.shield {
    position: relative;
    width: 10em;
    height: 10em;
    background: grey;
    &:before, &:after {
        content:"";
        background: grey;
        border-radius: 0;
        border-top-right-radius: 100% 100%;
        border-bottom-right-radius: 125% 100%;
        width: 6.275em;
        height: 6em;
        transform-origin: bottom left;
        transform: scale(1,1) translateX(-80%) rotate(-20deg);
        position:absolute;
        bottom:-42.5%;
    }
    &:after {transform: scale(-1,1) translateX(80%) rotate(-20deg);}
    &.test, &.test:before, &.test:after {background: rgba(0, 127, 0, 0.5);}
    &.red, &.red:before, &.red:after {background:red;}
    &.green, &.green:before, &.green:after {background:green;}
    &.blue, &.blue:before, &.blue:after {background:blue;}
}