div

Question

我已根据this chevron中的某些代码here，并将其更改为将其用作轮播中的导航。但是，我正在努力把它放在灰色区域。优选地，它将水平居中，边缘有一点填充物。

我试图将雪佛龙包裹在另一个div中，但没有成功。

.chevron {
  position: absolute;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 44px;
  width: 109px;
  top: 242px;
  background: #545454;
}
.chevron:hover:before,
.chevron:hover:after {
  background: blue;
}
.chevron {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.chevron:before,
.chevron:after {
  content: '';
  position: absolute;
  top: 0;
  height: 17%;
  background: red;
}
.chevron:before {
  left: 0;
  width: 51%;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
.chevron:after {
  right: 0;
  width: 50%;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

<div class="chevron"></div>

Answer 1

这是怎么回事： http://jsfiddle.net/8c2r3m5d/1/

到：之前和之后：我添加：

top:40%;

应该是顶部，因为整个人字形是旋转的，这就是为什么改变顶部值使它左右移动

Answer 2

我相信你很困惑，因为人字形旋转了90度。如果删除该旋转，则更容易理解V形元素的位置：

.chevron {
    position:relative;
    height: 44px;
    width: 109px;
    background: #545454;
}

.chevron:before, .chevron:after {
    content: '';
    position: absolute;
    top: 40%;
    height: 17%;
    background: red;
}

.chevron:before {
    left: 5%;
    width: 46%;
    transform: skew(0deg, 6deg);
}

.chevron:after {
    right: 5%;
    width: 45%;
    transform: skew(0deg, -6deg);
}

<div class="chevron"></div>

请注意，为了解决这个问题，我还删除了转换属性的供应商前缀。

Answer 3

只需调整top偏移量，如下所示：

.chevron:before,.chevron:after {
    top: 42%;
    height: 17%;
}

顶部偏移值为50％减去高度的一半（8％）。你实际上是将V形垂直居中，因为你将它旋转了90度，因此它看起来需要水平居中。

＆＃13;

＆＃13;

.chevron {
  position: absolute;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 44px;
  width: 109px;
  top: 50px;
  background: #545454;
}
.chevron:hover:before,
.chevron:hover:after {
  background: blue;
}
.chevron {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.chevron:before,.chevron:after {
  content: '';
  position: absolute;
  top: 42%;
  height: 17%;
  background: red;
}
.chevron:before {
  left: 0;
  width: 51%;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
.chevron:after {
  right: 0;
  width: 50%;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

＆＃13;

<div class="chevron"></div>

＆＃13;

＆＃13;

＆＃13;