Question

所以我看到一些使用CSS制作的非常酷的东西，看到一些人的网站标志已经用纯CSS完成，没有图像。

我真的想了解它是如何完成的，我已经绘制了一个徽标，我将尝试使用CSS重新设计，但意识到它真的有多难！所以为了帮助我理解它，可以有人纠正我的代码，以便我能理解它是如何完成的！

感谢任何帮助:)谢谢。

（p.s糟糕的编码，但你可以看到我来自哪里？）

这是我想要实现的快速草图

＆＃13;

#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;
	
}

＆＃13;

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

＆＃13;

Answer 1

在线有很多img到css转换器，如THIS，但你应该制作一个高质量的图像并尝试转换它。

我刚给你建议的对流器使用像素像素一样的表格：

getChildView

DEMO

Answer 2

它不容易解释，因为没有＆＃34;确切的规则＆＃34;解释。您可以使用像paolobasso这样的工具，但它是一个基于像素的工具，只需通过矩阵（表格 - ＆gt;单元格）重新创建图像。

你在说什么，而不是N个矩形的数字分解。

每个矩形

它带有边距（例如：margin-left：auto，margin-right：auto表示＆＃34;居中＆＃34;）和flow（position属性）。
< / LI>
它由background属性着色。
它的尺寸标注为width和height。
它由border-radius塑造（弯曲）并且类似于拒绝每个浏览器（es：moz-border-radius）
它的形状和尺寸通过旋转度（transform: rotate(315deg)）

所以，手工制作这样的东西很困难，但是如果你想要理解你必须学习像OpenGL这样的东西而不是纯粹的css，那么原理就像用于2D图形一样，无论如何都在那里＆＃39没什么好说的，休息一下css flux和flow让你的＆＃34;矩形＆＃34;保持一致并保持正确的距离。通常你需要一些重叠，如果你有很多颜色（想象一件衬衫上的按钮）来管理css z-index属性。

使用纯CSS的徽标设计

2 个答案: