Как сделать изображение "нормальным" в перекошенном div? - PullRequest
Новая
       3

Как сделать изображение "нормальным" в перекошенном div?

2 голосов
/ 21 июня 2020

Итак, я хотел сделать алмаз с изображением в нем, но изображение будет деформироваться. Я хочу сделать так, чтобы он был горизонтальным (нормальным) и заполнял ромб.

Код , который я сделал. 

.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>

1 Ответ

2 голосов
/ 21 июня 2020

Возможно, было бы сложно инвертировать преобразование. Я бы построил это иначе без преобразования.

Вы можете просто управлять формой, регулируя ширину / высоту и переменные 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>

CSS изображение без перекоса внутри перекошенного контейнера (ромбовидная форма)

...