在中心创建带有倾斜块和菱形的菜单

Question

创造这样的东西我遇到了很大麻烦。在这里你可以看到我在做什么： https://jsfiddle.net/8ksxgh5o/

总的想法是在picture上看它。

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;
}

有人可以帮我提一些建议吗？我几乎无法控制那些偏斜的元素。

Answer 1

很有可能实现您正在寻找使用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>

Answer 2

修改： 我意识到这个技术有一个问题 - 因为如果你将鼠标悬停在钻石碎片上，它将被视为悬停在那个可能不适合你的角落的角落链接 - 但是我希望使用伪三角形的概念可以帮到你！如果您希望我更新小提示以解决此问题

，请与我们联系

由于中心钻石是完全白色的，我实际上更倾向于使用伪元素和CSS三角形来复制它，并且绝对将它们定位到每个供应盒角落。

https://jsfiddle.net/qnb08s3s/

我发现三角形发生器非常有用： http://apps.eky.hk/css-triangle-generator/

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

注意：clip-path为not well supported。在此之前，我不建议在生产环境中使用此答案中的技术。

这种倾斜将是不守规矩的。 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>