的SIM卡

純CSS圖標

我想修改下面的CSS代碼來獲得一個幾何形體是這樣的：的SIM卡

...並把一些文字（比如，數字「1 「）在圖標的中間。

#diamond { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border: 50px solid transparent; 
 
\t border-bottom-color: red; 
 
\t position: relative; 
 
\t top: -50px; 
 
} 
 
#diamond:after { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t left: -50px; 
 
\t top: 50px; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border: 50px solid transparent; 
 
\t border-top-color: red; 
 
}

<div id = 'diamond'>1</div>

能否請你幫我這個？

來源

2017-03-06 Edgar Navasardyan

我必須承認我這樣做很有趣，但是如果你需要的話，你最好還是使用SVG圖像，which you can style with CSS。

#diamond { 
 
    position: relative; 
 
    width: 180px; 
 
    height: 120px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border-radius: 15px; 
 
    background: steelblue; 
 
    color: white; 
 
    font: 48px sans-serif; 
 
} 
 

 
#diamond:before { 
 
    content: "\00a0"; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 35px 35px 0; 
 
    border-color: transparent white transparent transparent; 
 
}

<div id = 'diamond'>SIM</div>

來源

2017-03-06 19:39:46

帕特里克，感謝您的回答。你能評論一下你如何改變圖標的大小？ –

只需使用'width'和'height'，您可能還需要調整其他px值以進行縮放。這可能會變得非常乏味，所以我的建議是使用SVG圖像。 –

好的。它現在有效。帕特里克:)）請。還有一個無關緊要的要求。你如何用邊框包圍它？ –

只給你一個想法，什麼是可能與SVG以及如何更清潔和可維護這會讓你的CSS，這裏是一個例子。使用矢量繪圖工具生成了<path>，然後導出爲SVG。你可以簡單地把它與你的HTML內聯。

要更改尺寸，請在#sim元素上調整width。其餘的CSS規則很明顯。

#sim { 
 
    overflow: visible; 
 
    width: 75px; 
 
    height: auto; 
 
} 
 

 
#sim path { 
 
    fill: #5891A5; 
 
    stroke: #2D678D; 
 
    stroke-width: 4; 
 
} 
 

 
#sim text { 
 
    fill: white; 
 
    font: 48px sans-serif; 
 
}

<svg id="sim" x="0" y="0" width="180" height="120" viewBox="0 0 180 120"> 
 
    <path d="M180,108c0,6.627-5.373,12-12,12H12c-6.627,0-12-5.373-12-12V12C0,5.373,5.373,0,12,0h136l32,32V108z"/> 
 
    <text x="90" y="60" text-anchor="middle" dominant-baseline="central">SVG!</text> 
 
</svg>

來源

2017-03-06 22:03:06

回答

相關問題