css 32种图形绘制

1、正方形(square):

CSS Code:

  1. .square {
  2. width: 100px;
  3. height: 100px;
  4. background: #E5C3B2;
  5. }

上面的方法是,设置宽度和高度一致就可以实现正方形的效果,下面展示一种boder制作正方形的效果:

  1. .square {
  2. width: 0;
  3. height: 0;
  4. border: 50px solid #E5C3B2; /*边框大小等于正方形宽度(或高度)的一半*/
  5. }

效果:

2、平行四边形(parallelogram)

CSS Code:

  1. .parallelogram {
  2. width: 100px;
  3. height: 70px;
  4. -webkit-transform: skew(20deg);
  5. -moz-transform: skew(20deg);
  6. -o-transform: skew(20deg);
  7. -ms-transform: skew(20deg);
  8. transform: skew(20deg);
  9. background: #E5C3B2;
  10. }

效果:

我们可以通过“skew”的值大小来控制角度,如果其值为负值,将会改变扭曲方向:

  1. .parallelogram2 {
  2. width: 100px;
  3. height: 70px;
  4. -webkit-transform: skew(-20deg);
  5. -moz-transform: skew(-20deg);
  6. -o-transform: skew(-20deg);
  7. -ms-transform: skew(-20deg);
  8. transform: skew(-20deg);
  9. background: #E5C3B2;
  10. }

效果:

3、菱形(diamond)

CSS Code:

  1. .diamond {
  2. width: 80px;
  3. height: 80px;
  4. margin: 40px 0 0 40px;
  5. -webkit-transform-origin: 0 100%;
  6. -moz-transform-origin: 0 100%;
  7. -o-transform-origin: 0 100%;
  8. -ms-transform-origin: 0 100%;
  9. transform-origin: 0 100%;
  10. -webkit-transform: rotate(-45deg);
  11. -moz-transform: rotate(-45deg);
  12. -o-transform: rotate(-45deg);
  13. -ms-transform: rotate(-45deg);
  14. transform: rotate(-45deg);
  15. background: #E5C3B2;
  16. }

效果:

4、长方形()

CSS Code:

  1. .rectangle {
  2. width: 100px;
  3. height: 50px;
  4. background: #E5C3B2;
  5. }


效果:

5、梯形(trapezoid)

梯形一

CSS Code:

  1. .trapezoid-1 {
  2. height: 0;
  3. width: 100px;
  4. border-bottom: 100px solid #e5c3b2;
  5. border-left: 60px solid transparent;
  6. border-right: 60px solid transparent;
  7. }

效果:

梯形二

CSS Code:

  1. .trapezoid-2 {
  2. height: 0;
  3. width: 100px;
  4. border-top: 100px solid #e5c3b2;
  5. border-left: 60px solid transparent;
  6. border-right: 60px solid transparent;
  7. }

效果:

梯形三

CSS Code:

  1. .trapezoid-3 {
  2. height: 100px;
  3. width: 0;
  4. border-right: 100px solid #e5c3b2;
  5. border-top: 60px solid transparent;
  6. border-bottom: 60px solid transparent;
  7. }

效果:

梯形四

CSS Code:

  1. .trapezoid-4 {
  2. height: 100px;
  3. width: 0;
  4. border-left: 100px solid #e5c3b2;
  5. border-top: 60px solid transparent;
  6. border-bottom: 60px solid transparent;
  7. }

效果:

6、三角形(triangle)

三角形朝上

CSS Code:

  1. .triangle-up {
  2. height: 0;
  3. width: 0;
  4. border: 50px solid #e5c3b2;
  5. border-color:transparent transparent #e5c3b2 transparent;
  6. }

效果:

三角朝右

CSS Code:

  1. .triangle-rihgt {
  2. height: 0;
  3. width: 0;
  4. border: 50px solid #e5c3b2;
  5. border-color:transparent transparent transparent #e5c3b2;
  6. }

效果:

三角朝下

CSS Code:

  1. .triangle-down {
  2. height: 0;
  3. width: 0;
  4. border: 50px solid #e5c3b2;
  5. border-color: #e5c3b2 transparent transparent transparent;
  6. }

效果:

三角朝左

CSS Code:

  1. .triangle-left {
  2. height: 0;
  3. width: 0;
  4. border: 50px solid #e5c3b2;
  5. border-color:transparent #e5c3b2 transparent transparent;
  6. }

效果:

7、半圆(semicircle)

上半圆

CSS Code:

  1. .semicircle-top {
  2. background: #e5c3b2;
  3. height: 25px;
  4. width: 50px;
  5. -moz-border-radius: 50px 50px 0 0;
  6. -webkit-border-radius: 50px 50px 0 0;
  7. border-radius: 50px 50px 0 0;
  8. }

效果:

右半圆

CSS Code:

  1. .semicircle-right {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 25px;
  5. -moz-border-radius: 0 0px 50px 0;
  6. -webkit-border-radius: 0 50px 50px 0;
  7. border-radius: 0 50px 50px 0;
  8. }

效果:

下半圆

CSS Code:

  1. .semicircle-down {
  2. background: #e5c3b2;
  3. height: 25px;
  4. width: 50px;
  5. -moz-border-radius: 0 0 50px 50px;
  6. -webkit-border-radius: 0 0 50px 50px;
  7. border-radius: 0 0 50px 50px;
  8. }

效果:

左半圆

CSS Code:

  1. .semicircle-left {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 25px;
  5. -moz-border-radius: 50px 0 0 50px;
  6. -webkit-border-radius: 50px 0 0 50px;
  7. border-radius: 50px 0 0 50px;
  8. }

效果:

8、圆(circle)

CSS Code:

  1. .circle {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 25px;
  6. -webkit-border-radius: 25px;
  7. border-radius: 25px;
  8. }

效果:

9、椭圆(oval)

水平椭圆

CSS Code:

  1. .ovalHor {
  2. background: #e5c3b2;
  3. height: 40px;
  4. width: 80px;
  5. -moz-border-radius: 40px/ 20px;
  6. -webkit-border-radius: 40px/ 20px;
  7. border-radius: 40px/ 20px;
  8. }

效果:

垂直椭圆

CSS Code:

  1. .ovalVert {
  2. background: #e5c3b2;
  3. height: 80px;
  4. width: 40px;
  5. -moz-border-radius: 20px/ 40px;
  6. -webkit-border-radius: 20px/ 40px;
  7. border-radius: 20px/ 40px;
  8. }

效果:

10、表图(chartColorful)

CSS Code:

  1. .chartColorful {
  2. height: 0px;
  3. width: 0px;
  4. border: 50px solid red;
  5. border-color:purple red yellow orange;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }

效果:

11、四分之一圆(quarterCircle)

四分之一圆(上)

CSS Code:

  1. .quarterCircleTop {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 50px 0 0 0;
  6. -webkit-border-radius: 50px 0 0 0;
  7. border-radius: 50px 0 0 0;
  8. }

效果:

四分之一圆(右)

CSS Code:

  1. .quarterCircleRight {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 0 50px 0 0;
  6. -webkit-border-radius: 0 50px 0 0;
  7. border-radius: 0 50px 0 0;
  8. }

效果:

四分之一圆(下)

CSS Code:

  1. .quarterCircleBottom {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 0 0 50px 0;
  6. -webkit-border-radius: 0 0 50px 0;
  7. border-radius: 0 0 50px 0;
  8. }

效果:

四分之一圆(左)

CSS Code:

  1. .quarterCircleLeft {
  2. background: #e5c3b2;
  3. height: 50px;
  4. width: 50px;
  5. -moz-border-radius: 0 0 0 50px;
  6. -webkit-border-radius: 0 0 0 50px;
  7. border-radius: 0 0 0 50px;
  8. }

效果:

12、Chart(quarterCircle)

Chart(上)

CSS Code:

  1. .chartTop {
  2. height: 0px;
  3. width: 0px;
  4. border: 50px solid #e5c3b2;
  5. border-top-color:transparent;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }

效果:

Chart(右)

CSS Code:

  1. .chartRight {
  2. height: 0px;
  3. width: 0px;
  4. border: 50px solid #e5c3b2;
  5. border-right-color:transparent;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }

效果:

Chart(下)

CSS Code:

  1. .chartBottom {
  2.      height: 0px;
  3.      width: 0px;
  4.      border: 50px solid #e5c3b2;
  5.      border-bottom-color:transparent;
  6.      -moz-border-radius: 50px;
  7.      -webkit-border-radius: 50px;
  8.      border-radius: 50px;
  9. }

效果:

Chart(左)

CSS Code:

  1. .chartLeft {
  2. height: 0px;
  3. width: 0px;
  4. border: 50px solid #e5c3b2;
  5. border-left-color:transparent;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }

效果:

13、心形(heart)

左心形

CSS Code

  1. .heartLeft {
  2. width: 0;
  3. height: 0;
  4. border-color:red;
  5. border-style:dotted;
  6. border-width: 0 40px 40px 0;
  7. }

效果:

右心形

CSS Code

  1. .heartRight {
  2. width: 0;
  3. height: 0;
  4. border-color:red;
  5. border-style:dotted;
  6. border-width: 0 0 40px 40px;
  7. }

效果:

14、彩带(ribbon)

CSS Code

  1. .ribbon {
  2. width: 0;
  3. height: 100px;
  4. border-left: 50px solid red;
  5. border-right: 50px solid red;
  6. border-bottom: 35px solid transparent
  7. }

效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值