Shield Design Using CSS

md.shakil hossain

1507

 <div class="shield">
  <ul class="circle-container">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="inner-shield">
    <ul class="golden-pieces">
      <li>
        <div class="circle">
          <div></div> 
          <div></div>
          <div></div>
          <div></div>
        </div>
      </li>
       <li>
        <div class="circle">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </li>
       <li>
         <div class="circle">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </li>
       <li>
       <div class="circle">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </li>
    </ul>
    <div class="inner-plank">
       <ul class="small-circle-container">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
      <div class="inner-plank-centerplate">
        <div class="inner-center-center">
          <div class="inner-center-center-plate">
            <div class="inner-center-center-plate-orange">
              <!-- White circle at the center -->
              <div class="stain-circle">
                <div class="squares">
                  <div class="top-left"></div>
                  <div class="top-right"></div>
                  <div class="bottom-left"></div>
                  <div class="bottom-right"></div> 
                 </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul>
      <li class="plank"></li>
      <li class="plank"></li>
      <li class="plank"></li>
      <li class="plank"></li>
      <li class="plank"></li>
    </ul>
    
  </div>
</div>

<script src="http://lab.web-gate.fr/prefixfree.min.js"></script>

Try it Yourself >>

 body{
background:#fcfcf4;
padding:2em 5em;
}
.shield{
width:560px;
height:560px;
/*border-radius*/
-webkit-border-radius:560px;
   -moz-border-radius:560px;
        border-radius:560px;
/*linear-gradient*/
background:-webkit-gradient(linear,0 0,100% 100%,color-stop(#e1cf8f,0.5),color-stop(#d1af65,0.5));
background:-webkit-linear-gradient(120deg, #e1cf8f 50%, #d1af65 50%);
background:   -moz-linear-gradient(120deg, #e1cf8f 50%, #d1af65 50%);
background:     -o-linear-gradient(120deg, #e1cf8f 50%, #d1af65 50%);
background:        linear-gradient(135deg, #e1cf8f 50%, #d1af65 50%);
/*box-shadow*/
-webkit-box-shadow:0 1px 0 1px rgba(0, 0, 0, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 3px 0 rgba(255, 255, 255, 0.35);
   -moz-box-shadow:0 1px 0 1px rgba(0, 0, 0, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 3px 0 rgba(255, 255, 255, 0.35);
        box-shadow:0 1px 0 1px rgba(0, 0, 0, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 3px 0 rgba(255, 255, 255, 0.35);
float:left;
margin:auto 30%;
}
.golden-pieces{
position:absolute;
width:560px;
height:560px;
z-index:4;
/*transform*/
-webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
     -o-transform:rotate(45deg);
        transform:rotate(45deg);
}
.golden-pieces li{
width:45px;
height:45px;
/*linear-gradient*/
background:-webkit-gradient(linear,78.08% 110.22%,21.92% -10.22%,color-stop(#d8bf6e,0.5),color-stop(#e3d7a8,0.5));
background:-webkit-linear-gradient(115deg,#d8bf6e 50% ,#e3d7a8 50%);
background:   -moz-linear-gradient(115deg,#d8bf6e 50% ,#e3d7a8 50%);
background:     -o-linear-gradient(115deg,#d8bf6e 50% ,#e3d7a8 50%);
background:        linear-gradient(115deg,#d8bf6e 50% ,#e3d7a8 50%);
display:block;
float:left;
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
overflow:hidden;
/*box-shadow*/
-webkit-box-shadow:0 0 0 2px #efd77f, 0 2px 0 rgba(0, 0, 0, 0.2), 4px 4px 4px rgba(0, 0, 0, 0.4);
   -moz-box-shadow:0 0 0 2px #efd77f, 0 2px 0 rgba(0, 0, 0, 0.2), 4px 4px 4px rgba(0, 0, 0, 0.4);
        box-shadow:0 0 0 2px #efd77f, 0 2px 0 rgba(0, 0, 0, 0.2), 4px 4px 4px rgba(0, 0, 0, 0.4);
}
.golden-pieces li:nth-child(1){
position:absolute;
margin:3em 10.45em;
z-index:99;
}
.golden-pieces li:nth-child(2){
position:absolute;
margin:23em 10.45em;
z-index:99;
}
.golden-pieces li:nth-child(3){
position:absolute;
margin:13em 20.45em;
z-index:99;
}
.golden-pieces li:nth-child(4){
position:absolute;
margin:13em .5em;
z-index:99;
}
.golden-pieces li div{
width:30px;
height:30px;
float:left;
position:relative;
}
.golden-pieces li .circle{
margin:-.3em;
float:left;
}
.golden-pieces li .circle:after{
content:'';
display:block;
width:18px;
height:18px;
position:absolute;
background:#e5d9a2;
z-index:4;
margin:1.2em;
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
}
.golden-pieces li .circle div:nth-child(1){
margin:-3px;
background:#e6dcbe;
}
.golden-pieces li .circle div:nth-child(2){
margin:-27px 30px;
background:#ddcea1;
}
.golden-pieces li .circle div:nth-child(3){
margin:6px -3px;
background:#d9c797;
}
.golden-pieces li .circle div:nth-child(4){
margin:-36px 30px;
background:#c8ac5f;
}
.inner-shield, .inner-plank{
width:460px;
height:460px;
/*box-shadow*/
-webkit-box-shadow:0 0 0 1px #000;
   -moz-box-shadow:0 0 0 1px #000;
        box-shadow:0 0 0 1px #000;
/*border-radius*/
-webkit-border-radius:560px;
   -moz-border-radius:560px;
        border-radius:560px;
margin:50px;
background:#654a57;
/*transform*/
-webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
     -o-transform:rotate(-45deg);
        transform:rotate(-45deg);
}
.inner-shield ul{
display:block;
width:420px;
height:460px;
/*border-radius*/
-webkit-border-radius:460px;
   -moz-border-radius:460px;
        border-radius:460px;
margin:0;
overflow:hidden;
/*box-shadow*/
-webkit-box-shadow:0 -4px 0 rgba(0, 0, 0, 0.15), 0 4px 0 rgba(255, 255, 255, 0.20);
   -moz-box-shadow:0 -4px 0 rgba(0, 0, 0, 0.15), 0 4px 0 rgba(255, 255, 255, 0.20);
        box-shadow:0 -4px 0 rgba(0, 0, 0, 0.15), 0 4px 0 rgba(255, 255, 255, 0.20);
}
.inner-shield .small-circle-container{
/*box-shadow*/
-webkit-box-shadow:0 0 0;
   -moz-box-shadow:0 0 0;
        box-shadow:0 0 0;
}
.inner-shield ul .plank{
display:block;
width:480px;
height:20%;
margin:0 -2.5em;
/*box-shadow*/
-webkit-box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 -2px 0 rgba(0, 0, 0, 0.3);
   -moz-box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 -2px 0 rgba(0, 0, 0, 0.3);
        box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 -2px 0 rgba(0, 0, 0, 0.3);
}
.inner-shield ul .plank:nth-child(1){
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(#7a5c61),to(#77585e));
background:-webkit-linear-gradient(#7a5c61, #77585e);
background:   -moz-linear-gradient(#7a5c61, #77585e);
background:     -o-linear-gradient(#7a5c61, #77585e);
background:        linear-gradient(#7a5c61, #77585e);
}
.inner-shield ul .plank:nth-child(2){
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(#6c4d5d),to(#5e4559));
background:-webkit-linear-gradient(#6c4d5d, #5e4559);
background:   -moz-linear-gradient(#6c4d5d, #5e4559);
background:     -o-linear-gradient(#6c4d5d, #5e4559);
background:        linear-gradient(#6c4d5d, #5e4559);
}
.inner-shield ul .plank:nth-child(3){
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(#705062),to(#5f4659));
background:-webkit-linear-gradient(#705062, #5f4659);
background:   -moz-linear-gradient(#705062, #5f4659);
background:     -o-linear-gradient(#705062, #5f4659);
background:        linear-gradient(#705062, #5f4659);
}
.inner-shield ul .plank:nth-child(4){
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(#4c3c50),to(#42324c));
background:-webkit-linear-gradient(#4c3c50, #42324c);
background:   -moz-linear-gradient(#4c3c50, #42324c);
background:     -o-linear-gradient(#4c3c50, #42324c);
background:        linear-gradient(#4c3c50, #42324c);
}
.inner-shield ul .plank:nth-child(5){
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(#514057),to(#40374d));
background:-webkit-linear-gradient(#514057, #40374d);
background:   -moz-linear-gradient(#514057, #40374d);
background:     -o-linear-gradient(#514057, #40374d);
background:        linear-gradient(#514057, #40374d);
}
.inner-plank{
width:190px;
height:190px;
position:absolute;
z-index:2;
margin:135px;
/*transform*/
-webkit-transform:rotate(0deg);
   -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
     -o-transform:rotate(0deg);
        transform:rotate(0deg);
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,color-stop(#e1cf8f,0.5),color-stop(#d1af65,0.5));
background:-webkit-linear-gradient(#e1cf8f 50%, #d1af65 50%);
background:   -moz-linear-gradient(#e1cf8f 50%, #d1af65 50%);
background:     -o-linear-gradient(#e1cf8f 50%, #d1af65 50%);
background:        linear-gradient(#e1cf8f 50%, #d1af65 50%);
/*box-shadow*/
-webkit-box-shadow:0 2px 0 rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.2);
   -moz-box-shadow:0 2px 0 rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.2);
        box-shadow:0 2px 0 rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.2);
}
.inner-plank-centerplate{
width:85%;
height:85%;
margin:7.5%;
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,color-stop(#e1d69e,0.5),color-stop(#e2cb88,0.5));
background:-webkit-linear-gradient(#e1d69e 50%, #e2cb88 50%);
background:   -moz-linear-gradient(#e1d69e 50%, #e2cb88 50%);
background:     -o-linear-gradient(#e1d69e 50%, #e2cb88 50%);
background:        linear-gradient(#e1d69e 50%, #e2cb88 50%);
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
}
.inner-center-center{
/*border-radius*/
-webkit-border-radius:560px;
   -moz-border-radius:560px;
        border-radius:560px;
width:90px;
height:90px;
position:absolute;
z-index:2;
margin:36px;
/*transform*/
-webkit-transform:rotate(0deg);
   -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
     -o-transform:rotate(0deg);
        transform:rotate(0deg);
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,color-stop(#e1cf8f,0.5),color-stop(#d1af65,0.5));
background:-webkit-linear-gradient(#e1cf8f 50%, #d1af65 50%);
background:   -moz-linear-gradient(#e1cf8f 50%, #d1af65 50%);
background:     -o-linear-gradient(#e1cf8f 50%, #d1af65 50%);
background:        linear-gradient(#e1cf8f 50%, #d1af65 50%);
/*box-shadow*/
-webkit-box-shadow:0 2px 0 rgba(0, 0, 0, 0.2);
   -moz-box-shadow:0 2px 0 rgba(0, 0, 0, 0.2);
        box-shadow:0 2px 0 rgba(0, 0, 0, 0.2);
}
.inner-center-center-plate{
width:85%;
height:85%;
margin:7.5%;
background:#dec979;
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
float:left;
}
.inner-center-center-plate-orange{
width:85%;
height:85%;
margin:7.5%;
/*linear-gradient*/
background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(#d0a752,0.5),color-stop(#d2b269,0.5));
background:-webkit-linear-gradient(-90deg, #d0a752 50%, #d2b269 50%);
background:   -moz-linear-gradient(-90deg, #d0a752 50%, #d2b269 50%);
background:     -o-linear-gradient(-90deg, #d0a752 50%, #d2b269 50%);
background:        linear-gradient(-90deg, #d0a752 50%, #d2b269 50%);
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
/*box-shadow*/
-webkit-box-shadow:0px 8px 0px rgba(195, 147, 84, 0.25);
   -moz-box-shadow:0px 8px 0px rgba(195, 147, 84, 0.25);
        box-shadow:0px 8px 0px rgba(195, 147, 84, 0.25);
float:left;
}
.stain-circle{
/*transform*/
-webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
     -o-transform:rotate(45deg);
        transform:rotate(45deg);
width:85%;

Try it Yourself >>