我可以僅使用html和css複製此圖像 - 特別是形狀和邊緣？

我想複製下面的圖像只使用html和css，如果可能的話。我想用它作爲一個帶有不斷變化的圖標和顏色的「徽章」。靜態圖像不會爲我工作：我可以僅使用html和css複製此圖像 - 特別是形狀和邊緣？

所有這些似乎都是可行的，但我不知道如何複製徽章本身的實際形狀（綠色部分）。是否有一個特定的CSS指令，我需要研究實現這一目標？

編輯：出現「重複的問題」有人擔心。請注意，鏈接的問題不包括圖像或文字在六角形的中心，這是。這增加了一些問題的複雜性，從而帶來了新的問題。根據這個問題的答案，我能夠制定一個更好的谷歌搜索，並遇到了一個美麗的代碼簿。我投票重新提出這個問題。

來源

2016-11-27 Source Matters

爲什麼不直接使用SVG？ – Nit

因爲原始問題指出「只有可能的HTML和CSS」。 –

@NathanielFlick原始問題通常不知道比他們已知的更多。知道SVG的OP可能會說明這一點。 –

是可能的，但它的更好，如果你使用SVG下面是一個例子。與圓角

body{margin:0;} 
 
.hexagon { 
 
    width: 120px; 
 
    height: 60px; 
 
    position: relative; 
 
    margin:50px 10px; 
 
} 
 
.hexagon, .hexagon:before, .hexagon:after { 
 
    background: green; 
 
    border-radius: 5px 
 
} 
 
.hexagon:before, .hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 23px; 
 
    width: 74px; 
 
    height: 70px; 
 
    -moz-transform: rotate(145deg) skew(22.5deg); 
 
    -webkit-transform: rotate(145deg) skew(22.5deg); 
 
    transform: rotate(145deg) skew(22.5deg); 
 
} 
 
.hexagon:before { 
 
    top: -35px; 
 
} 
 
.hexagon:after { 
 
    top: 35px; 
 
} 
 
.hexagon span { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 120px; 
 
    height: 70px; 
 
    background:green; 
 
    z-index: 1; 
 
}

<div class="hexagon"><span></span></div>

來源

2016-11-27 21:18:26

我喜歡你如何推動傾斜，以獲得一些舍入！它不會在所有角落均勻發生（在FF中），但我沒有考慮到這一點。 –

@NathanielFlick我知道所有的角落是不圓的..我也不考慮使用CSS來做到這一點。：P SVG更容易。我以前的答案與你的答案相同所以我編輯我的答案:) –

CSS技巧有一個偉大的形狀頁面，more here，這裏是我如何完成你想要的，而不是我在形狀div中的文本，替換爲你選擇的圖標字體以及它的html和css（忽略邊距我加入了六邊形，這是隻有在那裏，所以你可以看到整個事情：

#hexagon { width: 100px; height: 55px; background: red; position: relative; margin-top: 3em; line-height: 55px; text-align: center; color: white;} 
 

 
#hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } 
 

 
#hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }

<div id="hexagon">X THING</div>

來源

2016-11-27 21:16:20

代表鏈接！真棒頁面。 –

非常歡迎您！我發現它很有用。儘管我喜歡SVG，但我仍然希望在添加它之前先使用html和css完成它。它仍然是更復雜的代碼，導致不正確的導出機會，並且出現功能膨脹和一些小問題。 –

我可以僅使用html和css複製此圖像 - 特別是形狀和邊緣？

回答

相關問題