使用纯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{
	overflow: hidden;
     height:45px;
     width:45px;
	 -webkit-border-radius: 0 0 0 150px;
    -moz-border-radius: 0 0 0 150px;
    border-radius: 0 0 0 150px;
	
     background:green;
	 -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -o-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg);

	 margin-left: auto ;
  	margin-right: auto ;
}
#logocenter{
	overflow: hidden;
	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;
	 margin-top: -72px;
	 margin-left: auto ;
  	margin-right: auto ;
}
#logocenter2{
	overflow: hidden;
	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;
	 margin-top: -40px;
	 margin-left: auto ;
  	margin-right: auto ;
	
}
#content{
	height: 90px;
	width: 90px;
	background-color: white;
	
}

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

Answer 1

网上有很多像这样的img 到 css 转换器，但是你应该制作一个高质量的图像并尝试转换它。

我刚刚向您建议的转换器使用逐像素的表格，如下所示：

<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

演示版