你的位置:首页 > 网页设计

[网页设计]CSS3新特性,绘制常见图形


前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等。以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形。

在此之前我们有必要了解下什么是伪元素(和它不同的,还有一个概念叫伪类,两者容易混淆),没有它画不成图形的。

a)伪元素:用来在内容元素的前后插入额外的元素,之所以叫伪元素,就是它们根本就不在文档中生成,只能在外部可见,比如:你F12时,在右边代码框中是不是可以看到?

这里用到的两个伪元素  ①元素之前:before  ②元素之后:after

1)圆,没必要了,我们看看三角形

/* CSS */.sanjiao {    width: 0px;    height: 0px;    margin: 30px auto;    position: relative;    border: 100px solid transparent;    border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/    /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */    border-right: 100px solid #5E5E5E;    border-top: 100px solid #3C98D1;*/  }/* HTML */<div class="sanjiao"></div>

2)圆柱

/* CSS */.yuanzhu {    position: relative;    height: 200px;    width: 50px;    background: #5E5E5E;    margin: 30px auto;    z-index: 999 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */  }

.yuanzhu:before {
    position: absolute;
    top: -10px;
    content: "";
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: #A8A8A8;
    z-index: 99
  }

.yuanzhu:after {
    position: absolute;
    bottom: -10px;
    content: "";
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: #5E5E5E;
    z-index: 9
  }

/* HTML */<div class="yuanzhu"></div>

3)五角星

画五角星,我们要先知道浏览器几个私有前缀后跟的样式中"deg"表示的是旋转角度,比如“45deg”表示的就是顺时针旋转45度,负的就表示逆时针。

rotate了是transform的其中一个属性,表示2D旋转,也就是二维旋转,它也有三维旋转,transform还有另外几个特性,可以去看看http://www.w3school.com.cn/cssref/pr_transform.asp 它的几个特性,用的好,做出来的特效 逼格还是挺高的

/* CSS */.wujiaox {     width: 0px;     height: 0px;     position: relative;     margin: 30px auto;     border: 100px solid transparent;     border-bottom: 70px solid #5E5E5E;     -webkit-transform: rotate(35deg);/* Safari和Chrome */     -moz-transform: rotate(35deg);/* Firefox */
     -ms-transform: rotate(35deg);/* IE 9 */
     -o-transform: rotate(35deg); /* Opera */
  }

  .wujiaox:after {
      content: "";
      width: 0px;
      height: 0px;
      display: block;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #5E5E5E;
      border-left: 100px solid transparent;
      position: absolute;
      top: 3px;
      left: -105px;
      -webkit-transform: rotate(-70deg);
      -moz-transform: rotate(-70deg);
      -ms-transform: rotate(-70deg);
      -o-transform: rotate(-70deg);
   }

  .wujiaox:before {
      content: "";
      width: 0;
      height: 0;
      border-bottom: 80px solid #5E5E5E;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      top: -45px;
      left: -65px;
      -webkit-transform: rotate(-35deg);
      -moz-transform: rotate(-35deg);/* 逆时针旋转35度 */
      -ms-transform: rotate(-35deg);
      -o-transform: rotate(-35deg);
    }

/* HTML */<div class="wujiaox"></div>

画五角星时,要注意,一定要设置一个content:""; 不然你是看不到伪类元素所表现出的样式的;两个伪类元素都要设置为绝对定位,父元素设置相对.

4)聊天框

/* CSS */
      .chatBox { width: 200px; height: 50px; margin: 30px auto; background: #5E5E5E; border-radius: 5px; position: relative; } .chatBox:before { content: ""; position: absolute; width: 0px; height: 0px; right: 100%; top: 15px; border-top: 8px solid transparent; border-right: 10px solid #5E5E5E; border-bottom: 8px solid transparent; }
/* HTML */
<div ></div>

5)八卦图,其实就是一个大半圆+两个小圆构成的

/* CSS */      .bagua {        width: 96px;        height: 48px;        background: #eee;        margin: 30px auto;        border-color: #000000;        border-style: solid;        border-radius: 100%;        border-width: 0.5px 0.5px 50px 0.5px;        position: relative;      }            .bagua:before {        content: "";        border-radius: 100%;        background: #FFFFFF;        position: absolute;        top: 50%;        left: 0px;        border: 18px solid #000000;        width: 12px;        height: 12px;      }            .bagua:after {        content: "";        border-radius: 100%;        background: #000000;        position: absolute;        top: 50%;        left: 50%;        border: 18px solid #eee;        width: 12px;        height: 12px;      }/* HTML */<div class="bagua"></div>

6)“砖石”图形

首先画一个直角梯形,再通过伪类元素在其下方画一个三角形

/* CSS */      .zhuanshi {        width: 50px;        height: 0;        border-style: solid;        margin: 30px auto;        border-width: 0 25px 25px 25px;        position: relative;        border-color: transparent transparent #5E5E5E transparent;      }            .zhuanshi:after {        content: "";        width: 0;        height: 0;        border-style: solid;        border-width: 70px 50px 0 50px;        border-color: #5E5E5E transparent transparent transparent;        position: absolute;        top: 25px;        left: -25px;      }/* HTML */<div class="zhuanshi"></div>

 

 

CSS3里还有很多话图形的方法方式,需要你慢慢去研究,虽然很少用到,但无聊时,拿来画画,还是挺有趣的.