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

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

编辑：我意识到这种技术的一个问题 - 如果你将鼠标悬停在钻石碎片上，它将被视为悬停在那个角落 link 这可能不适合你的情况 - 但是我希望使用伪三角形的概念有所帮助你在这里！如果您希望我更新 fiddle 来解决这个问题，请告诉我

由于中心的菱形是完全白色的，我其实更倾向于使用伪元素和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>

Answer 2

注意：`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>

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

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

Creating menu with skewed blocks and diamond in the center

html

css

css-shapes

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

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

Creating menu with skewed blocks and diamond in the center

html

css

css-shapes

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

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