HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 查看内容

史上最强大的40多个纯CSS绘制的图形(下)

2016-10-10 08:56| 发布者: Hyukoh| 查看: 1174| 评论: 0|原作者: 陈少华|来自: 码农网

摘要: 里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标
  Cut Diamond(砖石形)

 

 #cut-diamond {

  border-style: solid;

  border-color: transparent transparent red transparent;

  border-width: 0 25px 25px 25px;

  height: 0;

  width: 50px;

  position: relative;

  margin: 20px 0 50px 0;

  }

  #cut-diamond:after {

  content: "";

  position: absolute;

  top: 25px;

  left: -25px;

  width: 0;

  height: 0;

  border-style: solid;

  border-color: red transparent transparent transparent;

  border-width: 70px 50px 0 50px;

  }

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

  }

  Yin Yang(阴阳八卦)

  

#yin-yang {

  width: 96px;

  height: 48px;

  background: #eee;

  border-color: red;

  border-style: solid;

  border-width: 2px 2px 50px 2px;

  border-radius: 100%;

  position: relative;

  }

  #yin-yang:before {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  background: #eee;

  border: 18px solid red;

  border-radius: 100%;

  width: 12px;

  height: 12px;

  }

  #yin-yang:after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  background: red;

  border: 18px solid #eee;

  border-radius:100%;

  width: 12px;

  height: 12px;

  }

  Badge Ribbon(徽章丝带)

 

 #badge-ribbon {

  position: relative;

  background: red;

  height: 100px;

  width: 100px;

  -moz-border-radius: 50px;

  -webkit-border-radius: 50px;

  border-radius: 50px;

  }

  #badge-ribbon:before,

  #badge-ribbon:after {

  content: '';

  position: absolute;

  border-bottom: 70px solid red;

  border-left: 40px solid transparent;

  border-right: 40px solid transparent;

  top: 70px;

  left: -10px;

  -webkit-transform: rotate(-140deg);

  -moz-transform: rotate(-140deg);

  -ms-transform: rotate(-140deg);

  -o-transform: rotate(-140deg);

  }

  #badge-ribbon:after {

  left: auto;

  right: -10px;

  -webkit-transform: rotate(140deg);

  -moz-transform: rotate(140deg);

  -ms-transform: rotate(140deg);

  -o-transform: rotate(140deg);

  }

  Space Invader(太空入侵者)

  

#space-invader{

  box-shadow:

  0 0 0 1em red,

  0 1em 0 1em red,

  -2.5em 1.5em 0 .5em red,

  2.5em 1.5em 0 .5em red,

  -3em -3em 0 0 red,

  3em -3em 0 0 red,

  -2em -2em 0 0 red,

  2em -2em 0 0 red,

  -3em -1em 0 0 red,

  -2em -1em 0 0 red,

  2em -1em 0 0 red,

  3em -1em 0 0 red,

  -4em 0 0 0 red,

  -3em 0 0 0 red,

  3em 0 0 0 red,

  4em 0 0 0 red,

  -5em 1em 0 0 red,

  -4em 1em 0 0 red,

  4em 1em 0 0 red,

  5em 1em 0 0 red,

  -5em 2em 0 0 red,

  5em 2em 0 0 red,

  -5em 3em 0 0 red,

  -3em 3em 0 0 red,

  3em 3em 0 0 red,

  5em 3em 0 0 red,

  -2em 4em 0 0 red,

  -1em 4em 0 0 red,

  1em 4em 0 0 red,

  2em 4em 0 0 red;

  background: red;

  width: 1em;

  height: 1em;

  overflow: hidden;

  margin: 50px 0 70px 65px;

  }

  TV Screen(电视屏幕)

 

 #tv {

  position: relative;

  width: 200px;

  height: 150px;

  margin: 20px 0;

  background: red;

  border-radius: 50% / 10%;

  color: white;

  text-align: center;

  text-indent: .1em;

  }

  #tv:before {

  content: '';

  position: absolute;

  top: 10%;

  bottom: 10%;

  right: -5%;

  left: -5%;

  background: inherit;

  border-radius: 5% / 50%;

  }

  Chevron(雪佛龙)

 

 #chevron {

  position: relative;

  text-align: center;

  padding: 12px;

  margin-bottom: 6px;

  height: 60px;

  width: 200px;

  }

  #chevron:before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 51%;

  background: red;

  -webkit-transform: skew(0deg, 6deg);

  -moz-transform: skew(0deg, 6deg);

  -ms-transform: skew(0deg, 6deg);

  -o-transform: skew(0deg, 6deg);

  transform: skew(0deg, 6deg);

  }

  #chevron:after {

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  height: 100%;

  width: 50%;

  background: red;

  -webkit-transform: skew(0deg, -6deg);

  -moz-transform: skew(0deg, -6deg);

  -ms-transform: skew(0deg, -6deg);

  -o-transform: skew(0deg, -6deg);

  transform: skew(0deg, -6deg);

  }

  Magnifying Glass(放大镜)

  

#magnifying-glass{

  font-size: 10em; /* This controls the size. */

  display: inline-block;

  width: 0.4em;

  height: 0.4em;

  border: 0.1em solid red;

  position: relative;

  border-radius: 0.35em;

  }

  #magnifying-glass::before{

  content: "";

  display: inline-block;

  position: absolute;

  right: -0.25em;

  bottom: -0.1em;

  border-width: 0;

  background: red;

  width: 0.35em;

  height: 0.08em;

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  }

  Facebook Icon(Facebook图标)

  

#facebook-icon {

  background: red;

  text-indent: -999em;

  width: 100px;

  height: 110px;

  border-radius: 5px;

  position: relative;

  overflow: hidden;

  border: 15px solid red;

  border-bottom: 0;

  }

  #facebook-icon::before {

  content: "/20";

  position: absolute;

  background: red;

  width: 40px;

  height: 90px;

  bottom: -30px;

  right: -37px;

  border: 20px solid #eee;

  border-radius: 25px;

  }

  #facebook-icon::after {

  content: "/20";

  position: absolute;

  width: 55px;

  top: 50px;

  height: 20px;

  background: #eee;

  right: 5px;

  }

  Cone(圆锥形)

  

#cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  }

  Moon(月亮)

 

 #moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
  }

  Cross(十字架)

  

#cross {
  background: red;
  height: 100px;
  position: relative;
  width: 20px;
  }
  #cross:after {
  background: red;
  content: "";
  height: 20px;
  left: -40px;
  position: absolute;
  top: 40px;
  width: 100px;
  }

  以上就是纯CSS绘制的各种图形,感受到CSS的强大了吧。




来源作者: 陈少华
本站资源均由 HTML5中国 编辑从其他网站精选HTML5相关资源转载,以供网友参阅,投稿: news@html5cn.org

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-27 08:20

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部