如何使用 css 制作钥匙形状？

Question

我想制作一个 html div 包含这样的形状：

在 html table 中使用一些服装 css，我可以制作一个 table，其中一列为圆形头像，另一列为矩形框列，但不能像上图那样使圆圈与矩形重叠。

感谢您的提示。

Answer 1

您可以使用 :pseudo-element 来做到这一点。

div {
  position: relative;
  width: 300px;
  height: 75px;
  background: #B0B4FF;
  margin: 25px 0;
}
div:after {
  position: absolute;
  content: '';
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: url(http://www.lorempixel.com/125/125);
  top: -25px;
  right: -25px;
}

<div></div>

您可以将 background-image 更改为 JavaScript。

JavaScript 代码将遍历样式表规则，找到 #info:after 的规则并将其 backgroundImage 更改为指定的规则。

var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == "#info:after" || r.selectorText == "#info::after") {
      r.style.backgroundImage = 'url(http://dummyimage.com/125/125/0f8d94/0011ff&text=newImage)'
    }
  }
}

#info {
  position: relative;
  width: 300px;
  height: 75px;
  background: #B0B4FF;
  margin: 25px 0;
}
#info:after {
  position: absolute;
  content: '';
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: url(http://www.lorempixel.com/125/125);
  top: -25px;
  right: -25px;
}

<div id="info"></div>

由于您无法更改 background-image 到 CSS，您将需要一个 img 标签，并且因为 :pseudo-elements 不适用于 img 标签，你必须为矩形使用另一个 div。

.container {
  position: relative;
  width: 325px;
}
.info {
  width: 300px;
  height: 75px;
  background: #B0B4FF;
  margin: 25px 0;
  text-align: center;
  line-height: 75px;
}
img {
  position: absolute;
  top: -25px;
  right: -25px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: url(http://www.lorempixel.com/125/125);
}

<div class="container">
  <div class="info">Info Text</div>
  <img src="http://lorempixel.com/125/125" />
</div>

满足标题，A Real Key Shape:

#container {
  width: 325px;
}

<div id="container">
  <svg viewBox="-2 -2 206 103">
    <defs>
      <clipPath id="circ">
        <rect id="rect" x="1" y="1" width="98" height="98" rx="100" />
      </clipPath>
    </defs>
    <path d="M0,50 a50,50 0 0,1 96.9846,-17.101 m-96.9846,17.101 a50,50 0 0,0 96.9846,17.101 l10,10 q5,3 6,-3 v-12.5 h12.5 l7,7 l10,-12 l10,12 h7 l10,-12 l7,7 h8 l16,-15.5 q5,0 -16,-10 h-71.5 v-12.5 q0,-6 -6,-3 l-10,10" stroke-linecap="round" stroke="saddlebrown"
    stroke-width="2" fill="tan" />
    <path d="M100,51 h97 l-1.5,2 h-85z" stroke="saddlebrown" stroke-width="1" fill="none" />
    <text x="110" y="48" font-size="6">Info Text</text>
    <image clip-path="url(#circ)" width="98" height="98" x="1" y="1" style=" width: 100px; height: 100px; border-radius: 50%;" xlink:href="http://dummyimage.com/150x150/a77243/000000&text=Real Key Shape" />
  </svg>
</div>

如何使用 css 制作钥匙形状？

How to make a key shape using css?

css

css-shapes