使用純CSS的標誌設計

Question

所以我看到了一些使用CSS製作的非常酷的東西，並且看到一些人的網站標識以純CSS完成，沒有圖像。

我真的很想了解它是如何完成的，我已經繪製出一個標誌，我將嘗試使用CSS重新設計，但意識到它真的有多難！所以爲了幫助我理解這一點，有人可以更正我的代碼，以便我能夠理解它的完成情況！

任何幫助表示讚賞:)謝謝。

（PS可怕的編碼，但你可以看到我是從哪裏來？）

這是什麼，我想實現

#logotop{ 
 
    height:45px; 
 
    width:90px; 
 
    border-radius: 90px 90px 0 0; 
 
    -moz-border-radius: 90px 90px 0 0; 
 
    -webkit-border-radius: 90px 90px 0 0; 
 
    background:green; 
 
} 
 
#logobottom{ 
 
\t overflow: hidden; 
 
    height:45px; 
 
    width:45px; 
 
\t -webkit-border-radius: 0 0 0 150px; 
 
    -moz-border-radius: 0 0 0 150px; 
 
    border-radius: 0 0 0 150px; 
 
\t 
 
    background:green; 
 
\t -webkit-transform: rotate(315deg); 
 
    -moz-transform: rotate(315deg); 
 
    -o-transform: rotate(315deg); 
 
    -ms-transform: rotate(315deg); 
 
    transform: rotate(315deg); 
 

 
\t margin-left: auto ; 
 
    \t margin-right: auto ; 
 
} 
 
#logocenter{ 
 
\t overflow: hidden; 
 
\t position: relative; 
 
    height:55px; 
 
    width:55px; 
 
    border-radius: 90px 90px 90px 90px; 
 
    -moz-border-radius: 90px 90px 90px 90px ; 
 
    -webkit-border-radius: 90px 90px 90px 90px ; 
 
    background:white; 
 
\t margin-top: -72px; 
 
\t margin-left: auto ; 
 
    \t margin-right: auto ; 
 
} 
 
#logocenter2{ 
 
\t overflow: hidden; 
 
\t position: relative; 
 
    height:25px; 
 
    width:25px; 
 
    border-radius: 90px 90px 90px 90px; 
 
    -moz-border-radius: 90px 90px 90px 90px ; 
 
    -webkit-border-radius: 90px 90px 90px 90px ; 
 
    background:green; 
 
\t margin-top: -40px; 
 
\t margin-left: auto ; 
 
    \t margin-right: auto ; 
 
\t 
 
} 
 
#content{ 
 
\t height: 90px; 
 
\t width: 90px; 
 
\t background-color: white; 
 
\t 
 
}

<div id="content"> 
 
<div id="logotop"> 
 
</div> 
 
<div id="logobottom"> 
 
</div> 
 
<div id="logocenter"> 
 
</div> 
 
<div id="logocenter2"> 
 
</div> 
 
</div>

Answer 1

在線速寫有很多像img轉換器像THIS，但你應該做一個高質量的圖像，並嘗試將其轉換。

，我剛剛向您推薦的convetor使用像素對像素的白衣的表像：

<table cellpadding=0 cellspacing=0 height=50 width=50 style="font-size:0px;height:50;width:50"> 
    <tr> 
    <td> 
     <table cellpadding=0 cellspacing=0 height=50 width=50 style="font-size:0px;height:50px;width:50px"> 
     <tr height=0> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
      <td width=1 /> 
     </table 

DEMO

Answer 2

這並不容易解釋，因爲沒有「確切規則「 解釋。 您可以使用類似paolobasso的工具，但它是一個基於像素的工具，只需通過矩陣（表格 - >單元格）重新創建圖像。

你在說什麼，而是以N爲單位對數字進行分解。

每個矩形

• 它定位邊緣（例如：保證金左：汽車，餘量右：汽車的意思是 「中心」）和流量（位置屬性）。

• 它的顏色爲background財產。

• 它的尺寸爲width和height。

• 它的形狀（彎曲）由border-radius和類同下降到每一個瀏覽器（ES：MOZ-邊界半徑）

• 它的形狀和程度（transform: rotate(315deg)）

通過旋轉尺寸

所以，手工製作這樣的東西是很困難的，但是如果你想明白你必須學習像OpenGL這樣的東西，而不是純粹的CSS，原則和2D圖形一樣，不管怎麼說，沒有什麼可說的，休息所有關於CSS流量和流量都讓你的「矩形」保持不變d保持正確的距離。通常你會需要一些重疊，如果你有很多顏色（想象一個襯衫上的按鈕）來管理也屬於css z-index財產。