Question

我正在尝试制作菱形形状，以放置个人头像。但是我无法找到如何拉伸图像以使其充满形状的方法。这是我的代码：

#diamond {
  overflow: hidden;
  border: 3px solid black;
  width: 120px;
  height: 120px;
  /* Rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* Rotate Origin */
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  margin: 5% auto;
  margin-left: 50%;
}

.profilepic {
  width: 120px;
  height: 120px;
  transform: rotate(45deg);
}

<main>

  <head>
    <title>Your Profile</title>
    <link rel="stylesheet" href="stylesheet_userpage.css">
  </head>

  <body>
    <div id="diamond">
      <div><img class="profilepic" src="https://ae01.alicdn.com/kf/HTB17AjnXSMmBKNjSZTEq6ysKpXau/DIY-5D-Square-Diamond-Painting-Tabby-Kitten-and-Daisy-Flowers-Mosaic-Pattern-Rhinestones-Crystal-Handmade-Diamond.jpg" alt="Profile picture"></div>
    </div>
  </body>
</main>

Answer 1

尝试改用clip-path

div {
  display: inline-block;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

<div>
  <img src="http://www.fillmurray.com/400/400" />
  </div

或者，将scale变换以1.414的比例应用于图像

注意，值1.141仅在处理 square 元素时有效。其他形状可能需要其他值。

#diamond {
  overflow: hidden;
  border: 3px solid black;
  width: 120px;
  height: 120px;
  /* Rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* Rotate Origin */
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  margin: 15% auto;
  margin-left: 50%;
}

.profilepic {
  width: 120px;
  height: 120px;
  transform: rotate(45deg) scale(1.414);
}

<div id="diamond">
  <div><img class="profilepic" src="https://ae01.alicdn.com/kf/HTB17AjnXSMmBKNjSZTEq6ysKpXau/DIY-5D-Square-Diamond-Painting-Tabby-Kitten-and-Daisy-Flowers-Mosaic-Pattern-Rhinestones-Crystal-Handmade-Diamond.jpg" alt="Profile picture"></div>
</div>

如何用图像填充形状？

1 个答案: