CSS 魔法系列:纯 CSS 绘制各种图形《系列五》

  我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在图形绘制中的创新使用。

 

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

   

 

本文链接:CSS 魔法系列:纯 CSS 绘制各种图形《系列五》

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏