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

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

 

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

  

 

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

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

赞 (0) 打赏

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

支付宝扫一扫打赏

微信扫一扫打赏