Question

由于社区中其他人的技能，我创造了这个： http://codepen.io/anon/pen/NbdoKV HTML：

＆＃13;

.clipboard:after, .clip, .clip:before, .paper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.clipboard {
  position: relative;
  display: block;
  height: 27em;
  width: 23em;
  margin: 5em auto;
  border-radius: 3%;
  background: #b69b4c;
}
.clipboard:after {
  top: 2.25em;
  content: "";
  height: 1.5em;
  width: 20em;
  background: #fefefe;
}

.clip {
  z-index: 2;
  top: 4.2em;
  display: block;
  height: 10em;
  width: 17em;
  border-radius: 50%;
  background: #A7A7A7;
}
.clip:before {
  content: "";
  top: -.5em;
  height: 5.3em;
  width: 5.3em;
  border: 2.2em solid #A7A7A7;
  border-radius: 50%;
}

.paper {
  z-index: 2;
  display: block;
  height: 23em;
  width: 20em;
  margin-top: .5em;
  background: #fefefe;
}
.paper:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 3.25em;
  width: 3.25em;
}
.paper:after {
  content: "";
  position: absolute;
  height: 1.25em;
  width: 1.5em;
}

＆＃13;

<i class="clipboard">
    <i class="clip"></i>
    <i class="paper"></i>
</i>

＆＃13;

正如您所看到的，此图形无法很好地扩展/响应。如果我将宽度设置为100％，则一切都会失去其比率/透视。理想情况下，我希望能够将剪贴板宽度设置为100％，然后一切（高度，顶部的剪辑，填充等）将正确缩放 - 就像图像一样。

我可以看到两种方法来实现这种响应：

更改HTML / CSS - 我尝试过但失败了
将此HTML / CSS转换为SVG - 不知道从哪里开始

你会如何做出这种反应？

Answer 1

这是svg的一个例子。有几个网站可以绘制svgs。然后你有路径。我认为不同的属性是自我解释。如果您有任何问题，请询问。如果您想使用它，我认为最好是阅读更多相关内容。也许here但是还有更多好的来源。

＆＃13;

 <svg height="200" width="450">
 <path 
    id="lineAB" 
    fill="khaki"
    d="M9.778,96h108.445c5.400000000000006,0,9.778000000000006,-4.378,
       9.778000000000006,-9.778000000000006v-68.445c0,-5.4,-4.378,-9.778,
      -9.778000000000006,-9.778h-108.445c-5.4,0,-9.778,4.378,-9.778,
       9.778v68.445c0,5.400000000000006,4.378,9.778000000000006,
       9.778,9.778000000000006ZM8,16h112v72h-112v-72Z"
    transform="matrix(0.000503985 -1.04456 1.29502 0.000406514 -10.7973 124.73) 
    translate(-60,150)" />
 <path  
    fill="#C0C0C0" 
    d="M109.58289641986332,32.006086609509h8v-6.222000000000001c0,-5.3999999999999995,
      -4.378,-9.778,-9.778000000000006,-9.778h-30.221999999999994v-6.2219999999999995c0,
      -5.4,-4.378,-9.778,-9.778000000000006,-9.778h-20.445c-5.3999999999999995,0,
      -9.777999999999999,4.378,-9.777999999999999,9.778v6.222000000000001h-30.222c-5.3999999999999995,
       0,-9.778,4.378,-9.778,9.777999999999999v6.222000000000001h112ZM45.58289641986323,
       8.006086609509033h24v8h-24v-8Z" 
    transform="matrix(0.560377 0.00141111 -0.00141111 0.560377 25.8245 -9.95107)  
    translate(340,90)"/>

＆＃13;

现在你只需要调整高度和分别在transform属性中添加一个比例。

使HTML / CSS响应

1 个答案: