html - 如何使图像 "normal"在倾斜的div中？

Question

所以我想制作一颗带有图像的钻石，但图像会变形。我想让它水平(正常)并填充菱形。

The code我做的。

.diamond {
  width: 300px;
  height: 300px;
  border: 3px solid white;
  outline: 2px solid black;
  outline-offset: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(67.5deg) skewX(45deg) scaleY(0.70711);
  overflow: hidden;
}

.diamond-image {
  background-image: url("https://images7.alphacoders.com/108/1082408.png");
  background-size: cover;
  position: absolute;
  height: 100%;
  width: 140%;
  top: 0px;
  left: 0px;
  transform-origin: top bottom;
}

html{
    height: 100%;
}

body{
    background: rgb(224,215,215);
    background: radial-gradient(circle, rgba(224,215,215,1) 0%, rgba(144,144,144,1) 100%);
}

<div class="diamond">
  <div class="diamond-image"></div>
</div>

Answer 1

反转转换可能会很复杂。我会在不进行转换的情况下以不同的方式构建它。

您可以通过调整宽度/高度和 CSS 变量来简单地控制形状

html{
  min-height: 100%;
  background: radial-gradient(circle, rgba(224,215,215,1) 0%, rgba(144,144,144,1) 100%);
}

.box {
  --d:15px; /* gap between border and outline*/
  --b1:3px; /* width of outline (black)*/
  --b2:3px; /* width of border  (white) */

  --g1:transparent calc(48% - var(--d) - var(--b1) - var(--b2)) ,
       #fff        calc(49% - var(--d) - var(--b1) - var(--b2)) calc(49% - var(--b1)),
       #000        calc(50% - var(--b1));
  
  --g2:#fff       calc(48.5% - var(--d) - var(--b1) - var(--b2)) calc(48.5% - var(--d) - var(--b1)),
      transparent calc(49% - var(--d) - var(--b1)) calc(49% - var(--b1)),
      #fff        calc(49.5% - var(--b1)) 49.5%,
      transparent 50%;
  width:200px;
  height:400px;
  display:inline-block;
  vertical-align:top;
  background: 
    linear-gradient(to top    right,var(--g1)) top right    / 50% 50%,
    linear-gradient(to top    left ,var(--g1)) top left     / 50% 50%,
    linear-gradient(to bottom right,var(--g1)) bottom right / 50% 50%,
    linear-gradient(to bottom left ,var(--g1)) bottom left  / 50% 50%,
    url(https://picsum.photos/id/1074/800/800) center/cover;
  background-repeat:no-repeat;
  
  -webkit-mask: 
    linear-gradient(to top    right,var(--g2)) top right,
    linear-gradient(to top    left ,var(--g2)) top left,
    linear-gradient(to bottom right,var(--g2)) bottom right,
    linear-gradient(to bottom left ,var(--g2)) bottom left;
  -webkit-mask-size:50% 50%;
  -webkit-mask-repeat:no-repeat;
  mask: 
    linear-gradient(to top    right,var(--g2)) top right,
    linear-gradient(to top    left ,var(--g2)) top left,
    linear-gradient(to bottom right,var(--g2)) bottom right,
    linear-gradient(to bottom left ,var(--g2)) bottom left;
  mask-size:50% 50%;
  mask-repeat:no-repeat;
}

<div class="box"></div>
<div class="box" style="width:300px;--b1:5px;--d:20px"></div>
<div class="box" style="height:200px;--b2:5px;--d:5px"></div>