У меня большие проблемы с созданием такой вещи. Здесь вы можете увидеть, над чем я работаю: https://jsfiddle.net/8ksxgh5o/

Общая идея состоит в том, чтобы выглядеть так, как на картинке.

enter image description here

HTML:

<div class="offer-boxes">
  <div class="offer-box-title">
    <h2>SOME <strong>TEXT</strong></h2></div>
  <a href="#" class="offer-button offer-1 left">
    <h3>TITLE</h3>
  </a>
  <a href="#" class="offer-button offer-2 right">
    <h3>TITLE</h3>
  </a>
  <a href="#" class="offer-button offer-3 right">
    <h3>TITLE</h3>
  </a>
  <a href="#" class="offer-button offer-4 left">
    <h3>TITLE</h3>
  </a>
</div>

CSS:

.offer-boxes {
  position: relative;
  height: 900px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.offer-button {
  width: 50%;
  height: 450px;
  overflow: hidden;
  background: #1d1d1b;
}

.offer-button>h3 {
  position: absolute;
  top: 50%;
  left: 50%;
}

.offer-box-title {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.offer-box-title>h2>strong {
  display: block;
}

.offer-button.left {
  -moz-transform: skew(-20deg, 0deg);
  -webkit-transform: skew(-20deg, 0deg);
  -o-transform: skew(-20deg, 0deg);
  -ms-transform: skew(-20deg, 0deg);
  transform: skew(-20deg, 0deg);
}

.offer-button.left>h3,
.offer-button.left>img {
  -moz-transform: skew(20deg, 0deg) translate(-50%, -50%);
  -webkit-transform: skew(20deg, 0deg) translate(-50%, -50%);
  -o-transform: skew(20deg, 0deg) translate(-50%, -50%);
  -ms-transform: skew(20deg, 0deg) translate(-50%, -50%);
  transform: skew(20deg, 0deg) translate(-50%, -50%);
}

.offer-button.right {
  -moz-transform: skew(20deg, 0deg);
  -webkit-transform: skew(20deg, 0deg);
  -o-transform: skew(20deg, 0deg);
  -ms-transform: skew(20deg, 0deg);
  transform: skew(20deg, 0deg);
}

.offer-button.right>h3,
.offer-button.right>img {
  -moz-transform: skew(-20deg, 0deg) translate(-50%, -50%);
  -webkit-transform: skew(-20deg, 0deg) translate(-50%, -50%);
  -o-transform: skew(-20deg, 0deg) translate(-50%, -50%);
  -ms-transform: skew(-20deg, 0deg) translate(-50%, -50%);
  transform: skew(-20deg, 0deg) translate(-50%, -50%);
}

.offer-1 {
  position: absolute;
  right: 54.5%;
  top: 0;
}

.offer-1::before {
  content: "";
  transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  background-image: url('http://www.i-love-cats.com/images/2015/04/12/cat-wallpaper-38.jpg');
  background-repeat: no-repeat;
  background-position: top left;
  position: absolute;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  width: 2000px;
  height: 2000px;
}

.offer-2 {
  position: absolute;
  left: 54.5%;
  top: 0;
}

.offer-2::before {
  content: "";
  transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  background-image: url('http://www.i-love-cats.com/images/2015/04/12/cat-wallpaper-38.jpg');
  background-repeat: no-repeat;
  background-position: top left;
  position: absolute;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  width: 2000px;
  height: 2000px;
}

.offer-3 {
  position: absolute;
  right: 54.5%;
  top: 450px;
}

.offer-3::before {
  content: "";
  transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  background-image: url('http://www.i-love-cats.com/images/2015/04/12/cat-wallpaper-38.jpg');
  background-repeat: no-repeat;
  background-position: top left;
  position: absolute;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  width: 2000px;
  height: 2000px;
}

.offer-4 {
  position: absolute;
  left: 54.5%;
  top: 450px;
}

.offer-4::before {
  content: "";
  transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  background-image: url('http://www.i-love-cats.com/images/2015/04/12/cat-wallpaper-38.jpg');
  background-repeat: no-repeat;
  background-position: top left;
  position: absolute;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  width: 2000px;
  height: 2000px;
}

Может ли кто-нибудь помочь мне советами? У меня почти нет контроля над этими искаженными элементами.

2
Gekiyaku 17 Фев 2016 в 22:04

3 ответа

Лучший ответ

Очень возможно достичь желаемого эффекта с помощью преобразований наклона CSS. Нам просто нужно задать ему правильную настройку transform-origin. Заставив .offer-box-title принимать всю высоту и ширину родительского элемента, располагая его абсолютно по отношению к родительскому элементу, можно также сделать так, чтобы текст отображался в центре. Глядя на снимок экрана, текст внутри ромба кажется коротким и не динамичным, поэтому такой подход не приведет к проблемам с переполнением.

Вывод является адаптивным (как вы можете видеть, открыв вывод фрагмента в полноэкранном режиме), и эффект hover также ограничен формами (вы можете увидеть это, наведя курсор на каждую форму, включая ромб).

Я также добавил несколько встроенных комментариев во фрагмент для дополнительных пояснений.

.offer-boxes {
  position: relative;
  height: 100vh;  /* to demonstrate responsiveness */
  min-height: 450px;  /* just for demo as snippet run window is too small */
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.offer-button {
  position: absolute;
  width: 50%;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;  /* to avoid jagged edges due to transform */
}
.offer-button > h3 {
  position: absolute;
  top: 50%;
  left: 50%;
}
.offer-button::before{
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://lorempixel.com/800/600/nature/5);
  background-position: right;
}  
.offer-box-title {
  position: absolute;
  height: 100%;
  width: 100%;
}
.offer-box-title > h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-75%);
  text-align: center;
}
.offer-1, .offer-2 {
  top: 0;
  border-bottom: 2px solid white;  /* the space between the top and bottom blocks */
}
.offer-3, .offer-4 {
  top: 50%;
  border-top: 2px solid white;  /* the space between the top and bottom blocks */
}
.offer-1 {
  transform: skewX(-15deg);
  transform-origin: right top;
}
.offer-2 {
  transform: skewX(15deg);
  transform-origin: left top;
}
.offer-3 {
  transform: skewX(-15deg);
  transform-origin: right bottom;
}
.offer-4 {
  transform: skewX(15deg);
  transform-origin: right bottom;
}
.left {
  left: 0;
}
.right {
  right: 0;
}

/* the transform on parent affects child and so has to be reversed, the translation is to get it centered */
.offer-1 > h3 {
  transform: skewX(15deg) translateX(-50%) translateY(-50%);
  transform-origin: right top;
}
.offer-2 > h3 {
  transform: skewX(-15deg) translateX(-50%) translateY(-50%);
  transform-origin: left top;
}
.offer-3 > h3 {
  transform: skewX(15deg) translateX(-50%) translateY(-50%);
  transform-origin: right bottom;
}
.offer-4 > h3 {
  transform: skewX(-15deg) translateX(-50%) translateY(-50%);
  transform-origin: right bottom;
}

/* similar to the h3, the pseudo element is also actually a child and so transform should be reversed */
.offer-1:before{
  transform: skew(15deg);
  transform-origin: right top;
}
.offer-2:before{
  transform: skew(-15deg);
  transform-origin: left top;
}
.offer-3:before{
  transform: skew(15deg);
  transform-origin: right bottom;
}
.offer-4:before{
  transform: skew(-15deg);
  transform-origin: right bottom;
}
* {
  box-sizing: border-box;
}

/* Just for demo */

a[class^="offer"]:hover:before,
.offer-box-title:hover {
  background: crimson;
}
body {
  margin: 0;
  padding: 0;
}
<div class="offer-boxes">
  <div class="offer-box-title">
    <h2>SOME<br><strong>TEXT</strong></h2>
  </div>
  <a href="#" class="offer-button offer-1 left">
    <h3>TITLE</h3>
  </a>
  <a href="#" class="offer-button offer-2 right">
    <h3>TITLE</h3>
  </a>
  <a href="#" class="offer-button offer-3 right">
    <h3>TITLE</h3>
  </a>
  <a href="#" class="offer-button offer-4 left">
    <h3>TITLE</h3>
  </a>
</div>
4
Harry 18 Фев 2016 в 05:11

Изменить: Я понял проблему с этой техникой - если вы наведете курсор на алмазные части, он будет считаться наведением для этой угловой ссылки, что может быть не идеально для вашего случая - однако я надеюсь, что концепция использования псевдотреугольников поможет вам здесь! Пожалуйста, дайте мне знать, если вы хотите, чтобы я обновил скрипку, чтобы исправить это

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

https://jsfiddle.net/qnb08s3s/

И генератор треугольников, который мне очень пригодился: http://apps.eky.hk/css-triangle-generator/

* {
  box-sizing:border-box;
}
.offer-boxes {
  position:relative;
}
.offer-boxes:after {
  display:table;
  content:"";
  clear:both;
}
.offer-box-title {
  position:absolute;
  top:50%;
  left:50%;
  height:90px;
  width:120px;
  margin-left:-60px;
  margin-top:-45px;
  background:#fff;
  text-align:center;
  z-index:1;
}
.offer-button {
  float:left;
  width:50%;
  height:250px;
  background: url('http://www.i-love-cats.com/images/2015/04/12/cat-wallpaper-38.jpg') no-repeat;
  background-size: cover;
  position:relative;
  text-align:center;
}
.offer-button h3 {
  max-width:90%;
  display:inline-block;
  vertical-align:middle;
  text-transform:uppercase;
}
.offer-button:after {
  content:"";
  width:1px;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
.offer-button:before {
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  position:absolute;
}
.offer-1:before {
  border-width: 0 0 200px 100px;
  border-color: transparent transparent #fff transparent;
  bottom:0;
  right:0;
}
.offer-2:before {
  border-width: 200px 0 0 100px;
  border-color: transparent transparent transparent #fff;
  bottom:0;
  left:0;
}
.offer-3:before {
  border-width: 0 100px 200px 0;
  border-color: transparent #fff transparent transparent;
  top:0;
  right:0;
}
.offer-4:before {
  border-width: 200px 100px 0 0;
  border-color: #fff transparent transparent transparent;
  top:0;
  left:0;
}
<div class="offer-boxes">
  <div class="offer-box-title">
    <h2>SOME <strong>TEXT</strong></h2></div>
  <a href="#" class="offer-button offer-1 left">
    <h3>Marketing</h3>
  </a>
  <a href="#" class="offer-button offer-2 right">
    <h3>PR Consulting</h3>
  </a>
  <a href="#" class="offer-button offer-3 right">
    <h3>Projekty Unijne</h3>
  </a>
  <a href="#" class="offer-button offer-4 left">
    <h3>Multimedia</h3>
  </a>
</div>
2
Crispin Twig 17 Фев 2016 в 21:28

ПРИМЕЧАНИЕ. clip-path плохо поддерживается. Пока это не произойдет, я не рекомендую использовать методы, описанные в этом ответе, в производственной среде.

Перекос будет непослушным. clip-path значительно упрощает работу так :

position: absolute;
width: 100%;
height: 100%;
background-color: white;
clip-path: polygon(50% 10%, 60% 50%, 50% 90%, 40% 50%);

Это заставляет центральный элемент покрывать весь экран белым цветом фона, а клипы возвращают ему форму ромба.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.container .center {
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: white;
  clip-path: polygon(50% 10%, 60% 50%, 50% 90%, 40% 50%);
  -webkit-clip-path: polygon(50% 10%, 60% 50%, 50% 90%, 40% 50%);
}
.container .image {
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("http://lorempixel.com/g/800/600/");
  border: 2px solid white;
}
.container .image a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}
<div class="container">
  <div class="center">SOME TEXT</div>
  <div class="image">
    <a href="#">TITLE</a>
  </div>
  <div class="image">
    <a href="#">TITLE</a>
  </div>
  <div class="image">
    <a href="#">TITLE</a>
  </div>
  <div class="image">
    <a href="#">TITLE</a>
  </div>
</div>
0
Hatchet 17 Фев 2016 в 21:20