創建CSS六角形“徽章”

Question

我正在嘗試創建一個徽章，其中包含帶有數字的六邊形。 徽章/列表項本身將包含一些信息/名稱。

這是我到目前為止所擁有的：

 .item { display: block; background-color: blue; } .item > span { color: white; display: inline-block; } .hexagon { position: relative; width: 65px; height: 65px; line-height: 65px; text-align: center; color: white; } .hexagon span { position: absolute; color: white; z-index: 2; left: 30; } .hexagon:before { color: #ef473a; position: absolute; content: "\\2B22"; font-size: 65px; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; } 

 <div class="item"> <div class="hexagon"><span>1</span></div> <span class="title">TEST test</span> <!-- maximum width? > new line --> <span class="info">something darkside</span> </div> 

這是我要實現的目標：

如您所見，“藍色”背景只能從六邊形的尖端開始。 它的寬度和高度不會改變。 所以現在我想知道使用圖像是否更容易，或者有人可以幫助我重新創建圖像，也可以嗎:)

提前致謝！

Answer 1

嘗試flexbox方式，它適合您的情況，因為您要在中間垂直對齊三個項目（獎牌，標題，說明）。

下面是一個起點，您可以自己將其擴展到您的需求。

請注意，我還更改了六邊形的創建方式，它現在不使用UTF8字符，而只是使用彩色邊框。 這使您可以更好地控制實際六邊形獎牌的大小。

站在其尖端之一上，此六邊形的高度等於其直徑（d），而直徑（d）則是形成六邊形的六條線之一的兩倍長。 那么此六角形的寬度（w）為： s * sqrt(3)或.5 * d * sqrt(3) 。

 .badge { height: 64px; margin-left: 35px; color: white; font-family: sans-serif; background: blue; border: 1px solid transparent; display: flex; align-item: middle; } .medal { position: relative; margin-left: -30px; min-width: 75px; } .count { position: absolute; width: 58px; text-align: center; line-height: 64px; font-size: 30px; top: -16.74px; } h3 { max-width: 40%; margin-right: 30px; font-size: 14px; } p { font-size: .875em; } .hexagon { position: relative; width: 58px; height: 33.49px; background-color: #ff2600; margin: 14.74px 0 16.74px 0; } .hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: 29px solid transparent; border-right: 29px solid transparent; } .hexagon:before { bottom: 100%; border-bottom: 16.74px solid #ff2600; } .hexagon:after { top: 100%; width: 0; border-top: 16.74px solid #ff2600; } 

 <div class="badge"> <div class="medal"> <div class="hexagon"> <div class="count">1</div> </div> </div> <h3>The HEXAGON Badge Quest</h3> <p>You successfully posted a valid question on Stack Overflow and received an answer.</p> </div> 

Answer 2

請嘗試以下方法。 我尚未在手機上進行測試。 在這一點上僅適用於chrome，但它應該使您接近。 您需要稍微處理一下文本以處理藍色條中的環繞和調整大小，但是您的問題是關於徽章的。 邊角效果會將形狀裁剪約10像素。 因此，在欄上設置固定的高度，在六邊形上設置高10px的高度就可以了。 然后只需一些定位和邊距即可將事物移動到位。 祝好運。

 .item { display: block; background-color: blue; height: 66px; position: relative; left: 35px; width: 100%; } .item > span { color: white; display: inline-block; } .hexagon { display: inline-block; position: relative; width: 66px; height: 66px; line-height: 66px; text-align: center; color: white; top: 0; left: -35px; } .hexagon span { position: absolute; color: white; z-index: 2; width: 66px; height: 66px; line-height: 66px; text-align:center; left: -0; } .hexagon:before { color: #ef473a; position: absolute; content: "\\2B22"; font-size: 76px; z-index: 1; width: 66px; height: 66px; left: 0; top: -5px; } .title { position: absolute; font-size: 1.75rem; top: 12px; left: 33px; margin: 0; text-align:center; display:block; height: 66px; width: 20%; line-height: 18px; } .info { position: absolute; top: 0px; left: 20%; margin: 0; text-align:center; display:block; height: 66px; width: 70%; line-height: 66px; vertical-align: center; } 

 <div class="item"> <div class="hexagon"><span>1</span></div> <span class="title">TEST test</span> <!-- maximum width? > new line --> <span class="info">something darkside</span> </div>