0

Подскажите как с помощью css повернуть элементы как на скриншоте? Или вообще можно картинку через css так сделать?

введите сюда описание изображения

  ul {
  list-style: none;
  margin: 0;
  padding: 0; }
  img {
  max-width: 100%; }
  a {
  color: #373636;
  text-decoration: none; }
  .row-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }



.align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.jus-end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.jus-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .square {
  /*transform: rotate(45deg)*/
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  max-width: 50%;
  padding: 1em; }
  .square__title {
    text-transform: uppercase;
    font-family: "LatoBlack", sans-serif;
    font-size: 1.8em; }
  .square__text {
    color: #fff;
    font-family: "LatoRegular", sans-serif;
    font-size: .9em; }

.dark-square {
  background-color: #1b1b1b; }
  .dark-square_title {
    color: #019edb; }

.btn_blue {
  color: #fff;
  background-color: #019edb;
  padding: .7em 1.2em;
  -webkit-border-radius: 1.5em;
          border-radius: 1.5em;
  text-transform: uppercase;
  font-family: "LatoBold", sans-serif;
  font-size: .8em; }
<ul class="jus-center align-center row-flex ">
    <li class="square dark-square square-medium">
       <h2 class="square__title dark-square_title">We are best</h2>
       <p class="square__text">Lorem ipsum dolor  mero moleamet,                            soluta euism od isea, hiea un</p>
       <a href="" class="btn_blue">Read more</a>
     </li>
     <li class="square big-square">
        <img src="http://www.myphotofilter.com/crop-image/assets/img/picture.jpg" alt="alt" >
    </li>
 </ul>

2 ответа 2

1

Увидел у вас использование transform, однако, суть должна быть не просто повернуть блок на 45 градусов, а как раз таки еще и содержимое этого блока повернуть обратно на -45 градусов. Для корректного отображения ромбов - им лучше задавать форму квадрата, а контент в них центровать. Плюс, надо прописать overflow: hidden; Для черного ромба этого будет достаточно, но там где картинка - лучше сделать картинку фоном для блока контента и абсолютным позиционированием сдвинуть на 50% от верха и от левого края (а затем с помощью того же transform подвинуть на половину размера блока вверх и влево). Вот только если она будет 100%, то будет показываться восьмиугольником - поэтому ей необходимо выставить ширину и высоту 150% от родителя. Не знаю понятно описал я или нет, но пример приложил.

ul {
  list-style: none;
  margin: 100px 0 0 0;
  padding: 0; }
  img {
  max-width: 100%; }
  a {
  color: #373636;
  text-decoration: none; }
  .row-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

ul li{
  width: 250px;
  height: 250px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}
ul li .content{
  transform: rotate(-45deg);
}

.full-width-background{
    background-size: cover;
    width: 150%;
    height: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.jus-end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.jus-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .square {
  position:relative;
  /*transform: rotate(45deg)*/
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  max-width: 50%;
  padding: 1em; }
  .square__title {
    text-transform: uppercase;
    font-family: "LatoBlack", sans-serif;
    font-size: 1.8em; }
  .square__text {
    color: #fff;
    font-family: "LatoRegular", sans-serif;
    font-size: .9em; }

.dark-square {
  z-index:11;
  background-color: #1b1b1b; }
  .dark-square_title {
    color: #019edb; }

.btn_blue {
  color: #fff;
  background-color: #019edb;
  padding: .7em 1.2em;
  -webkit-border-radius: 1.5em;
          border-radius: 1.5em;
  text-transform: uppercase;
  font-family: "LatoBold", sans-serif;
  font-size: .8em; }
<ul class="jus-center align-center row-flex ">
    <li class="square dark-square square-medium">
      <div class="content">
       <h2 class="square__title dark-square_title">We are best</h2>
       <p class="square__text">Lorem ipsum dolor  mero moleamet,                            soluta euism od isea, hiea un</p>
       <a href="" class="btn_blue">Read more</a>
      </div>
     </li>
     <li class="square big-square">
      <div class="content full-width-background" style="background-image:url(http://www.myphotofilter.com/crop-image/assets/img/picture.jpg);">
        <!--img src="http://www.myphotofilter.com/crop-image/assets/img/picture.jpg" alt="alt" -->
      </div>
    </li>
 </ul>

-1
  -moz-transform: rotate(45deg); /* Для Firefox */
  -ms-transform: rotate(45deg); /* Для IE */
  -webkit-transform: rotate(45deg); /* Для Safari, Chrome, iOS */
  -o-transform: rotate(45deg); /* Для Opera */
  transform: rotate(45deg);

Можете использовать эти css свойства для поворота блоков

3
  • Вопрос не в том как повернуть блок на 45 градусов, это, если вы внимательно посмотрите код, как раз таки и сделано, только закоментировано. Проблема заключается в том как повернуть блоки, но не их содержимое, с чем и требуется помощь. 26 сен 2017 в 14:20
  • тогда поверните внутренний блок обратно на -45 градусов 26 сен 2017 в 14:27
  • Тогда картинка будет не ромбом, а восьмиугольником. Теперь проблема в этом. P.S.: В ответе выше я уже дал подробное описание с примером как это сделать 26 сен 2017 в 14:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.