каким образом сделать картинки от угла в угол

Question

* {
  margin: 0;
  padding: 0;
}

.main_container_photo {
  background: url(../img/mainfone.jpg) no-repeat center center fixed;
  background-size: cover;
  min-height: 100%;
  background-color: #020202;
  display: block;
  /* -webkit-text-size-adjust: none; */
  max-width: 100%;
}

.info_name_artist {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 812px;
  height: 258px;
  left: 120px;
  top: 142px;
}

.name {
  font-family: 'Circular Std';
  font-style: normal;
  font-weight: 400;
  font-size: 102px;
  line-height: 129px;
  text-transform: uppercase;
  /* color */
  color: #282828;
}

.data_concert {
  font-family: 'Circular Std';
  font-style: normal;
  font-weight: 400;
  font-size: 72px;
  line-height: 91px;
  /* color */
  color: #5C5C5C;
}

.biography_artist {
  font-family: 'Circular Std';
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 46px;
  /* color */
  color: #282828;
  letter-spacing: 0.07em;
}

.track_list_platina {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
}

.track_salam {}

.tack_kak_v_perviy_raz {}

.track_abu_dhabi_baby {}

.gruppy {}

.track_lambo {}

.main_track_list {}

.track_na_gryaznom {}

.navsegda {}

.track_bigboy {}

.track_valentina {}

.track_vossap {}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>

<body>
  <div class="main_container_photo">
    <div class="info_name_artist">
      <div class="name">
        ПЛАТИНА
      </div>
      <div class="data_concert">
        20.10.2022
      </div>
      <div class="biography_artist">
        Платина – хип-хоп исполнитель родом из Латвии.
      </div>
    </div>
    <div class="track_list_platina">
      <div class="track_salam">
        <img src="img/track_list/salam_jpg.jpg" alt="salam">
      </div>
      <div class="tack_kak_v_perviy_raz">
        <img src="img/track_list/kak_v_perviy_raz.jpg" alt="perviy raz">
      </div>
      <div class="track_abu_dhabi_baby">
        <img src="img/track_list/dhabi.jpg" alt="">
      </div>
      <div class="gruppy">
        <img src="img/track_list/gruppy.jpg" alt="">
      </div>
      <div class="track_lambo">
        <img src="img/track_list/lambo.jpg" alt="">
      </div>
    </div>
    <div class="main_track_list">
      <div class="track_na_gryaznom">
        <img src="img/track_list/diana.jpg" alt="">
      </div>
      <div class="navsegda">
        <img src="img/track_list/navsegda.jpg" alt="">
      </div>
      <div class="track_bigboy">
        <img src="img/track_list/big_boy.jpg" alt="">
      </div>
      <div class="track_valentina">
        <img src="img/track_list/valentina.jpg" alt="">
      </div>
      <div class="track_vossap">
        <img src="img/track_list/vossap.jpg" alt="">
      </div>
    </div>
  </div>
  <script src="js/app.js"></script>
</body>

</html>

хочу сделать наподобие такого, попробовал с помощью данных стилей, но у меня страница растягивается, нужно чтобы была еще и фиксирована сама страница, чтобы она не растягивалась вместе с блоком. подскажите как правильно сделать, это мой первый макет, поэтому сложно дается и некоторых моментов не понимаю, можете просто подсказать, как данный стиль называется 'эффект', я погуглю

Answer 1

.wrapper {
  width: 100%;
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #9e9e9e 0%, #ffffff 30%, #6a6a6a 100%);
}

.cards {
  position: absolute;
  width: 115%;
  text-align: center;
  transform: translateX(30%) translateY(-15%) rotateX(49deg) rotateZ(330deg) skewX(18deg) skewY(349deg);
}

.cards>* {
  display: inline-block;
  width: 23%;
  aspect-ratio: 1 / 2;
  margin-right: 1%;
  margin-bottom: 1%;
}

.cards>*:nth-child(1) {
  background: linear-gradient(0deg, #000000 0%, #000000 40%, #708d73 100%);
}

.cards>*:nth-child(2) {
  background: linear-gradient(0deg, #000000 0%, #000000 40%, #611c1c 100%);
}

.cards>*:nth-child(3) {
  background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
}

.cards>*:nth-child(4) {
  background: linear-gradient(0deg, #000000 0%, #000000 40%, #bf805b 100%);
}

.cards>*:nth-child(5) {
  background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
}

.cards>*:nth-child(6) {
  background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
}

<div class="wrapper">
  <div class="cards">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

БЛОГ НА HUSL

каким образом сделать картинки от угла в угол

Ответы (1 шт):