Search code examples
htmlcsssvgcss-shapes

How to integrate multiple lock icons inside a chain made using CSS?

I am having the following chain created in css. As you can see I have also created a padlock in svg. My goal is to add multiple of these locks directly to the chain:

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  display: grid;
}

body {
  min-height: 100vh;
  display: grid;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ffffff;
}

.chain {
  position: absolute;
}

.link {
  display: inline-block;
  width: 2rem;
  height: 3rem;
  border-radius: 1rem;
  background: #ff8e50;
  background-image: -webkit-gradient( linear, left top, left bottom, from(#f8be5b), color-stop(35%, #fef1c9), color-stop(65%, #e69539), to(#f7f2a0));
  background-image: -webkit-linear-gradient( top, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: -o-linear-gradient( top, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: linear-gradient( to bottom, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}

.link:nth-child(2n + 1):before {
  position: absolute;
  content: "";
  top: 0.5rem;
  left: 0.5rem;
  width: 1rem;
  height: 2rem;
  border-radius: inherit;
  background: #ffffff;
}

.links.left .link {
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-90deg);
}

.links.left .link:nth-child(2n),
.links.right .link:nth-child(2n) {
  z-index: 1;
  width: 0.5rem;
  height: 2rem;
  position: relative;
  top: -7px;
  background: #ff8e50;
  background-image: -webkit-gradient( linear, left top, right top, from(#f8be5b), color-stop(35%, #fef1c9), color-stop(65%, #e69539), to(#f7f2a0));
  background-image: -webkit-linear-gradient( left, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: -o-linear-gradient( left, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: linear-gradient( to right, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}


/* Lock */

.shackle {
  stroke: #000;
  transform-origin: right;
  transition: all .3s ease;
  transform: translateY(0%);
}

svg {
  width: 100px;
  perspective: 1000px;
  &.unlock {
    .shackle {
      transform: translateY(-20%);
    }
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M64,234.667h384V512H64V234.667z"/>
<path class="shackle" fill="none" stroke="#FFFFFF" stroke-width="60" stroke-miterlimit="10" d="M362.666,436.5V128
	c0-58.901-47.766-106.667-106.666-106.667c-58.901,0-106.667,47.765-106.667,106.667v128"/>
</svg>

<div class="container">
  <div class="swag">
    <div class="chain">
      <div class="links left">
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
      </div>
    </div>
  </div>
</div>

Please see below how my final result should look like:

enter image description here

The above display shows the lock added to every chain element.

Any suggestions how to do that?

I appreciate your replies!

Solution

  • Here is an idea without the use of svg and only with CSS (I also simplified some of your code).

    I used radial/linear-gradient in order to create the lock.

    enter image description here

    Simply insert the lock inside the link where you need to show it.

    *,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  display: grid;
}

.link {
  display: inline-block;
  position: relative;
  width: 3rem;
  height: 2rem;
  border-radius: 1rem;
  background: 
    linear-gradient( to right, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}

.link:before {
  position: absolute;
  content: "";
  top: calc(50% - 0.5rem);
  left: calc(50% - 1rem);
  width: 2rem;
  height: 1rem;
  border-radius: inherit;
  background: #ffffff;
}

.link:after {
  position: absolute;
  z-index: 2;
  content: "";
  width: 2rem;
  height: 0.5rem;
  top: calc(50% - 0.25rem);
  right: -1rem;
  border-radius: 1rem;
  background-image: linear-gradient( to bottom, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}

.lock {
  position: absolute;
  z-index:9;
  width: 2rem;
  height: 1.5rem;
  background: #000;
  top: calc(100% + 0.25rem);
  margin-left: 0.75rem;
}

.lock:before {
    content: "";
    position: absolute;
    height: 1.5rem;
    width: 1.5rem;
    bottom: 97%;
    border-radius: 100% 100% 0 0;
    margin-left: 0.25rem;
    background: 
    radial-gradient(circle at bottom, transparent 12%, #000 13%) 0 -37px/100% 200% no-repeat,
    linear-gradient(to right,transparent 77%,#000 0),
    linear-gradient(to right,#000 23%,transparent 0) 0px 19px/100% 100% no-repeat;
}
    <div class="container">
  <div class="swag">
    <div class="chain">
      <div class="links left">
        <div class="link">
          <div class="lock"></div>
        </div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link">
          <div class="lock"></div>
        </div>
        <div class="link">
          <div class="lock"></div>
        </div>
        <div class="link">
          <div class="lock"></div>
        </div>
        <div class="link"></div>
      </div>
    </div>
  </div>
</div>