中心css雪佛龍在div

我基於this chevron從here關閉了一些代碼，並將其更改爲在傳送帶中用作導航。不過，我正在努力將其集中在灰色地帶。優選地，它將水平居中並且具有一點點的邊緣。中心css雪佛龍在div

我試圖在另一個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>

來源

2015-11-24 ptf

我相信你是困惑，因爲人字形旋轉90度。如果刪除的旋轉，這是很容易理解的字形元素的定位：我也去掉了供應商前綴

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

注了本作的緣故轉換屬性題。

來源

2015-11-24 14:52:43

謝謝！這是第一篇文章，所以選擇這個，但都回答我的問題。任何「轉換原產地」的原因？ – ptf

@ptf在你的情況下它並不重要，你可以刪除它。 –

這個什麼： http://jsfiddle.net/8c2r3m5d/1/

到：before和：我加入後：因爲整個字形旋轉

top:40%;

應該是頂部，這就是爲什麼改變TOP值品牌它向左和向右

來源

2015-11-24 14:53:26 Hacktisch

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

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

頂部偏移值爲50％減去高度的一半（8％）。實際上，由於您已將它旋轉90度，因此它實際上是垂直居中的V形，因此它看起來需要水平居中。

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

來源

2015-11-24 14:54:37

中心css雪佛龍在div

回答

相關問題