css-绘制食豆人

xyc

    咱们继续之前说的css实现图形的效果方法，今天来说说食豆人的实现方法。
    原理：设置border和border-top-left-radius，border-bottom-right-radius等属性。
    效果：
   
    HTML：
   

[HTML] 纯文本查看 复制代码

<div class="div"></div>

    css样式：
   

[CSS] 纯文本查看 复制代码

.div {
 width: 0;
 height: 0;
 float: left;
 border-right: 60px solid transparent;
 border-left: 60px solid #300fed;
 border-top: 60px solid #300fed;
 border-bottom: 60px solid #300fed;
 border-top-left-radius: 60px;
 border-top-right-radius: 60px;
 border-bottom-left-radius: 60px;
 border-bottom-right-radius: 60px;
}

    以上就是食豆人的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

范范

支持楼主