CSS画图形

CSS 2014年10月25日 ,

相信大家一直都有想法去把自己的页面做成自己想要的形式,哪怕是一个标点符号,也要符合自己的胃口,问题是不是没有自己的想法,就是不知道从哪里下手,要不就是心有余而力不足啊。枫竹梦就是一直有这样的想法,属于力不从心那种的。今天特地分享点Web开发中的CSS的内容。

CSS绘制常用图形

正方形

比较简单,CSS设置长宽相等就可以实现了。

#squre{
    width: 108px;
    height: 108px;
    background: #ff8240;
}

矩形

#rectangle{
    width: 216px;
    height: 108px;
    background: #ff8240;
}

圆形

设置圆角正好等于边长的一半。

#circle{
    width: 108px;
    height: 108px;
    -moz-border-radius: 54px;
    -webkit-border-radius: 54px;
    border-radius: 54px;
    background: #ff8240;
}

椭圆

#oval{
    width: 216px;
    height: 108px;
    -moz-border-radius: 108px/54px;
    -webkit-border-radius: 108px/54px;
    border-radius: 108px/54px;
    background: #ff8240;
}

向上三角形

利用边框border属性,巧妙在于transparent与实体颜色的结合。

#trangle-up{
    width: 0;
    height: 0;
    border-left: 54px solid transparent;
    border-right: 54px solid transparent;
    border-bottom: 108px solid #ff8240;
}

向下三角形

#trangle-down{
    width: 0;
    height: 0;
    border-left: 54px solid transparent;
    border-right: 54px solid transparent;
    border-top: 108px solid #ff8240;
}

向左三角形

#trangle-left{
    width: 0;
    height: 0;
    border-top: 54px solid transparent;
    border-bottom: 54px solid transparent;
    border-right: 108px solid #ff8240;
}

向右三角形

#trangle-right{
    width: 0;
    height: 0;
    border-top: 54px solid transparent;
    border-bottom: 54px solid transparent;
    border-left: 108px solid #ff8240;
}

向左上三角形

#trangle-top-left{
    width: 0;
    height: 0;
    border-top: 54px solid #ff8240;
    border-right: 54px solid transparent;
    border-bottom: 54px solid transparent;
    border-left: 54px solid #ff8240;
}

向右上三角形

#trangle-top-right{
    width: 0;
    height: 0;
    border-top: 54px solid #ff8240;
    border-right: 54px solid #ff8240;
    border-bottom: 54px solid transparent;
    border-left: 54px solid transparent;
}

向右下三角形

#trangle-bottom-right{
    width: 0;
    height: 0;
    border-top: 54px solid transparent;
    border-right: 54px solid #ff8240;
    border-bottom: 54px solid #ff8240;
    border-left: 54px solid transparent;
}

向左下三角形

#trangle-bottom-left{
    width: 0;
    height: 0;
    border-top: 54px solid transparent;
    border-right: 54px solid transparent;
    border-bottom: 54px solid #ff8240;
    border-left: 54px solid #ff8240;
}

梯形

#trapezoid{
    width: 108px;
    height: 0;
    border-right: 54px solid transparent;
    border-bottom: 108px solid #ff8240;
    border-left: 54px solid transparent;
}

其它方向的梯形同理。

平行四边形

在实现平行四边形之前先介绍一下CSS3的transform属性,其变形的方式以下几种:

  • 1.rotate旋转
  • 2.skew扭曲
  • 3.scale缩放
  • 4.translate移动
  • 5.matrix矩阵变幻

transform-origin用于确定变形的基准点。

#parallelogram{
    width: 216px;
    height: 108px;
    -webkit-transform: skew(20deg); /* chrome || safari */
    -moz-transform: skew(20deg);    /* firefox */
    -o-transform: skew(20deg);      /* opera */
    -ms-transform: skew(20deg);     /* IE */
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    -o-transform-origin:left top;
    -ms-transform-origin:left top;
    background: #ff8240;
}

六角星

实现原理就是使用两个三角形进行叠加,巧妙在于第二个三角形使用伪类:after实现。

#star-six{
    width: 0;
    height: 0;
    border-right: 54px solid transparent;
    border-bottom: 108px solid #ff8240;
    border-left: 54px solid transparent;
    position: relative;
    margin-bottom: 40px;
}
#star-six:after{
    width: 0;
    height: 0;
    border-top: 108px solid #ff8240;
    border-right: 54px solid transparent;
    border-left: 54px solid transparent;
    content: " ";
    position: absolute;
    left: -54px;
    top: 38px;
}

五角星

#star-five{
    width: 0;
    height: 0;
    position: relative;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 70px solid #ff8240;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}
#star-five:before{
    width: 0;
    height: 0;
    position: absolute;
    border-bottom: 80px solid #ff8240;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: " ";
    top: -51px;
    left: -70px;
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}
#star-five:after{
    width: 0;
    height: 0;
    position: absolute;
    border-bottom: 70px solid #ff8240;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    content: " ";
    top: 7px;
    left: -110px;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}

还有更巧妙的用法,以后给大写分享。

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
日志标题:《CSS画图形》
日志链接:http://furzoom.com/css-shapes/
博客名称:枫竹梦

发表评论

插入图片

NOTICE1:请申请gravatar头像,没有头像的评论可能不会被回复!

回到顶部