Css chevron center in div

Question

I based this chevron with the code here , and modified it to use it as navigation in a carousel. However, I try my best to concentrate it in the gray zone. Preferably, it would be centered horizontally with little addition to the edges.

I tried wrapping the chevron in another div, but without success.

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

Run codeHide result

Answer 1

I believe that you were embarrassed because the chevron was rotated 90 degrees. If you remove this rotation, it’s much easier to understand the layout of the chevron elements:

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

Run codeHide result

, transform .

Answer 2

: http://jsfiddle.net/8c2r3m5d/1/

: before : :

top:40%;

, , .

Answer 3

Just adjust the offset topas follows:

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

The upper offset value is 50% minus half the height (8%). You actually center the chevron vertically, since you rotated it 90 degrees, therefore, it looks like it should be horizontally positioned.

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

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

Run codeHide result