CODEWITHSUNDEEP
htmlcsscss-shapes
ptf
ptf

Reputation: 3370

Center css chevron in div

I have based this chevron off some code from here, and changed it to use it as navigation in a carousel. However, I'm struggling to center it in the gray area. Preferably it would be centered horizontally with a little padding to the edges.

I tried to wrap the chevron in another div, but with no 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>

Upvotes: 4

Views: 2670

Answers (3)

web-tiki
web-tiki

Reputation: 103790

I believe you were confused because the chevron is rotated 90 deg. If you remove that rotation, it is much easier to understand the positioning 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>

Note that I also removed the vendor prefixes for the transform property for the sake of this question.

Upvotes: 2

Marc Audet
Marc Audet

Reputation: 46785

Simply adjust the top offset as follows:

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

The top offset value is 50% minus half of the height (8%). You actually are centering the chevron vertically since you have rotated it 90 degrees, hence it looks like it needs to be horizontally centered.

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

Upvotes: 2

Hacktisch
Hacktisch

Reputation: 1514

What about this: http://jsfiddle.net/8c2r3m5d/1/

To the :before and :after I added:

top:40%;

SHould be top because the entire chevron is rotated, this is why changing the top value makes it go left and right

Upvotes: 3

Related Questions