html – 使用纯CSS的徽标设计

所以我看到一些使用CSS制作的非常酷的东西,并看到一些人的网站标志在纯CSS中完成,没有图像.

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

任何帮助表示赞赏:)谢谢.

(p.s糟糕的编码,但你可以看到我来自哪里？)

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

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

解决方法

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

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

<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

html – 使用纯CSS的徽标设计

解决方法

猜你在找的HTML相关文章