CSS 魔法系列：纯 CSS 绘制各类图形《系列五》

　　咱们的网页由于 CSS 而呈现变幻无穷的风格。这一看似简单的样式语言在使用中很是灵活，只要你发挥创意就能实现不少比人想象不到的效果。特别是随着 CSS3 的普遍使用，更多新奇的 CSS 做品涌现出来。《CSS 魔法系列》继续给你们带来 CSS 在图形绘制中的创新使用。
您可能感兴趣的相关文章
CSS3 在网页设计中的20佳惊艳应用
推荐12个漂亮的 CSS3 按钮实现方案
推荐10个很是优秀的 CSS3 开发工具
分享50个漂亮的 CSS3 最佳应用示例
24款很是实用的 CSS3 工具终极收藏

 
Egg  

 

#egg {
   display:block;
   width: 126px;
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}

　　

Pac-Man  

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

　　

Talk Bubble  

 

#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

　　

12 Point Burst  

 

#burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}

　　
8 Point Burst  

 

#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
}

　　 

您可能感兴趣的相关文章
35个让人惊讶的 CSS3 动画效果演示
Web 前沿：一组极其绚丽的 CSS3 效果
Web 前沿：那些让人惊叹的 CSS3 应用
十款精心挑选的在线 CSS3 代码生成工具
年度盛宴：2012年最精彩的 CSS3 教程

 
本文连接：CSS 魔法系列：纯 CSS 绘制各类图形《系列五》
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
转载于猿2048:⇨《CSS 魔法系列：纯 CSS 绘制各类图形《系列五》》