html - 尝试在 CSS3 中重新创建 webOS 样式的导航

Question

我正在尝试重新创建 LG 在其电视 WebOS 中的底部应用程序导航栏。对于那些不熟悉的人，下面是它的图片。

我创建了一个位于屏幕底部的容器，然后创建了十个左右的“图 block ”。然后我使用变换将它们向右倾斜，但这有更多问题，例如我必须为 div 添加疯狂的高度，它们在屏幕上相互推挤等。

谁能想出更好的方法来解决这个问题？我试过的代码如下(缩短。顺便说一下，我使用了 SASS)。

SASS/CSS:

.navigation{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 250px;
    background: red;
    overflow: hidden;

    .bar{
        width: 10%;
        height: 600px;
        background: blue;
        @include rotate(-45deg);
        position: relative;
        float: left;
    }
}

HTML:

<section class="navigation">
    <div class="bar">
    </div>
    <div class="bar">
    </div>
</section>

Answer 1

使用 transform: skew(-25deg)反而。

兼容性:IE9 无偏斜和 IE10+ 有偏斜

• 链接中的文本被包裹在一个 span 中

• 图片添加在span之前

• 两者都是 img和 span给出 transform: skew(25deg)消除他们的扭曲

重要:图像元素上的 float 确保它不会影响 span 边距

例子

请注意开始和结束之间没有空格 <a>元素:<a>link</a><a>link</a> . This is to prevent an inline gap.

nav > a {
  display: inline-block;
  vertical-align: bottom;
  width: 80px;
  height: 150px;
  text-align: center;
}
nav > a {
  transform: skew(-25deg);
  transform-origin: 0 90%; /* Control x-axis */
  transition: background 0.5s;
}
nav > a > span,
nav > a > img {
  transform: skew(25deg); /* Reverse Skew */
  display: block;
  margin-top: 120px;
  clear: left;
}
nav > a > img {
  margin: 50px 0 0 20px;
  float: left; /* Prevents the image from affecting the spans margin */
}
nav > a:nth-child(odd) {
  background: #F00;
}
nav > a:nth-child(even) {
  background: #F90;
}
nav > a:hover {
  background: #333;
}

<nav>
  <a href="link">
    <img src="http://www.placehold.it/40" /><span>Link</span>
  </a><a href="link"><span>Link</span></a><a href="link"><span>Link</span></a><a href="link"><img src="http://www.placehold.it/40" /></a>
</nav>