如何在使用 CSS 制作的链中集成多个锁图标？

Question

我在 css 中创建了以下链。如您所见，我还在 svg 中创建了一个挂锁。我的目标是将多个这样的锁直接添加到链中：

* {
  -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>

请看下面我的最终结果应该是怎样的：

上面的显示显示了添加到每个链元素的锁。

有什么建议吗？

感谢您的回复！

Answer 1

这是一个不使用 svg 而只使用 CSS 的想法（我还简化了你的一些代码）.

我使用 radial/linear-gradient 来创建锁。

只需将锁插入 link 需要展示的地方即可。

*,
*: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>

Answer 2

更新：如评论中所述，使用 CSS 向量绘制图像往往会使事情变得过于复杂；这个问题就是一个很好的例子。如果对链节和锁都使用 SVG，这将变得非常简单。（"Complicated" 除了很少有绘图程序导出到 CSS "graphics" 的简单事实之外。它比日常有用的方法更噱头。）

按原样，@Termani 的回答有效。

一个更完整的答案是将 CSS 链链接换成 SVG（例如 https://pixabay.com/en/chain-metal-chain-links-link-146909/ ），然后使用 <symbol> 和 <use> 元素作为链条和锁。

原回答：

在您的 SVG 中添加一个带有 id 属性的 <symbol> 标签来标记您正在重复使用的图像。然后在您的特定链接中，您可以添加一个 <svg> 标签和一个 <use> 标签来引用图像。（代码未经测试，但应该可以工作）

<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" xml:space="preserve">
    <symbol id="padlock" width="20px" height="20px" viewBox="0 0 512 512">
        <path d="M64,234.667h384V512H64V234.667z"/>
        <path class="shackle" fill="none" stroke="#000000" 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"/>
    </symbol>
</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"><svg><use xlink:href="#padlock"></use></svg></div>
        <div class="link"><svg><use xlink:href="#padlock"></use></svg></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"><svg><use xlink:href="#padlock"></use></svg></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>

如何在使用 CSS 制作的链中集成多个锁图标？

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

html

css

svg

css-shapes