withhtmlandcss写这篇博客的原因是看了Medium上的这篇文章：HowIstarteddrawingCSSImages,andthenwow?同样是前端开发，为什么差别这么大？大的？笔者和自己的技能点完全不同！看了她在codepen上的几个作品，比如这个皮卡丘，发现用的技术不多，所以也想试试。但是有哪些动漫人物是简单到可以用几个基本的几何图形画出来的呢？我想到了一个人，于是决定在《一拳超人》画一个红烧蛋，不对，是那个披着斗篷的光头男——Ms。埼玉。结果见下图：http://codepen.io/noiron/pen/...技术概述从html文件可以看出这张图片实际上是由div元素组成的，一共使用了15个div。给一个div元素添加适当的css样式后，就形成了脸的一部分。在画埼玉的头像时，最重要的css属性就是border-radius，我们可以用它来画圆、椭圆以及各种变体。图片中人脸、眼睛、耳朵的轮廓都是通过border-radius来实现的，后面会介绍它的使用。另一个需要说明的css属性是transform，可以实现平移和旋转。在引入border-radius之前，我对border-radius的理解仅限于给元素添加圆角，将它的值设置为50%可以让矩形呈现为圆形。查了一些资料，发现可以用来画很多图形。border-radius是以下四个属性的简写，每个属性用于设置角的形状：border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusimage从MDN上图可以看出，当只设置了一个值或者两个相同的值时，显示为一个圆圈；当设置两个不同的值时，显示为椭圆。以border-top-left-radius为例：/*角是一个圆*//*border-top-left-radius:radius*/border-top-left-radius:3px;/*角是一个省略号*//*border-top-left-radius:horizo??ntalvertical*/border-top-left-radius:0.5em1em;如果是缩写，则写成如下格式：border-radius:48%48%50%50%/42%42%54%54%；'/'前的四个值表示横轴的长度，'/'后的四个值表示纵轴的长度。当横轴的长度和纵轴的长度相等时，'/'后面的那组值可以省略。同一组中还有四个值的缩写。方法类似于padding和margin的缩写。当第一个值与第三个值相同或第二个值与第四个值相同时，只能写入一次。了解border-radius的用法后，给div元素一个合适的长宽比，调整四个圆角的半径，就可以得到你想要的形状。//下面的样式可以画出埼玉的脸型//调整width,height,border-radius后可以画出眼睛、鼻子和嘴巴的形状#div1{width:100px;高度：144px；边框：2px实心#000；边界半径：48%48%50%50%/42%42%54%54%；}transform简介transform属性也是一个非常强大的属性，可以对元素进行各种变形。但是我们这里只需要用它来进行平移和旋转操作。/*可以使用translate来实现平移操作*//*translate()的两个参数分别表示水平方向和垂直方向的平移距离*/transform:translate(12px,50%);/*lineabove和below这两行是等价的*/transform:translateX(12px);transform:translateY(50%);/*顺时针旋转20度*/transform:rotate(20deg);combine得到最后的结果，你把埼玉的头像拆解后，每个部分用一个div表示，加上合适的样式，就可以组合起来了。你可以使用transform来调整它们的距离，或者直接使用绝对定位。最后得到了埼玉的头像：呃，光头男，你是谁！？好像不是所有的光头都叫埼玉，细节上需要稍微调整一下：OK，所以有点像埼玉先生。最后，如果你愿意，你可以使用transition属性来添加一点动画效果。再次播放代码地址：Codepen代码，并在我的博客上显示这篇文章的地址：HowtodrawOnePunchManwithhtmlandcss
