2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

CSS图形基础:纯CSS绘制图形

javascript程序设计作者:索爱单子

      为了在页面中利用CSS3绘制图形,在页面中定义

<div  class="container">

       <div class="shape"></div>

</div>    

      其中,container作为显示图形的画布(容器),shape描述所绘制的图形。

定义.container的样式规则如下:

.container{
 margin: 0 auto;
 width: 300px;
 height:300px;
 position: relative;
 display:flex;
 justify-content:center;
 align-items:center;
 background:#d8d8d8;
 border: 4px solid rgba(255, 0, 0, 0.9);
 border-radius: 10%;
 }

对shape设置不同的样式规则,可以绘制不同的图形。

1.利用边框属性border绘制基本图形

      在CSS中,可以用width和height属性设置一个元素的宽度和高度,background属性设置元素的背景色。例如,设置.shape的样式规则如下:

.shape{
 position: absolute;
 height:200px;
 width:200px;
 background:#ff8c00;
 }

      则可以在页面中绘制如图1所示的用深橙色填充的边长为200px的正方形。

 

图1  用深橙色填充的正方形

      图1中,外面的红色圆角方框由.container样式决定,里面的用深橙色填充的边长为200px的正方形由.shape样式决定。完整的HTML文件内容如下。

<!DOCTYPE html>
<html>
<head>
<title>CSS图形绘制</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape
  {
    position: absolute;
    height:200px;
    width:200px;
    background:#ff8c00;
  }
</style>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
</div>    
</body>
</html>

      下面各图形绘制时,除了特别说明,我们只给出图形所对应.shape样式的定义,其余部分保持不变。这样修改.shape样式,可以绘制不同的图形。

      例如,要绘制一个边长为200px的正方形(只有外框线,没有内部填充),可以修改.shape如下:

.shape{
    position: absolute;
    height:200px;
    width:200px;
    border:4px solid #ff8c00;
  }

      此时页面显示如图2所示,“画布”中显示的图形为一个边长为200px的正方形。其中,用到了border属性进行边框样式的设置。

 

图2  正方形

      border属性是一个缩写的边框属性,用于设置元素所有的边框属性。可以设置的属性分别(按顺序)为:border-width(边框宽度)、border-style(边框样式)和border-color(边框颜色)。

       本文中会用到包括border在内的许多CSS属性,这些属性的格式和功能我们不一一介绍,只是拿过来应用。需要了解这些属性功能和使用方法的读者可以参看《CSS参考手册》(https://www.w3cschool.cn/cssref/3ps212do.html)。

       (1)三角形。

修改.shape如下:

  .shape{
    position: absolute;
    height:50px;
    width:50px;
    border-top: 100px solid orange;
    border-left: 100px solid blue;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
  }

可在页面中看到如图3所示的图形。

 

图3  四个梯形围成正方形

      在图3中,橙色梯形块代表是上边框宽度,蓝色梯形块代表左边框宽度,红色梯形块代表下边框宽度,绿色梯形块代表右边框宽度,对几个边距的宽度而言,它们之间的分界恰好是这个正方形的对角线所在的直线,如果里面的小正方形宽高无穷小(将shape样式定义中width和height的属性值均设为0),那么这个图形将是一个由四块不同颜色三角形拼接而成的图形,如图4所示。

 

图4  四个三角形拼成正方形

修改.shape如下:

  .shape
  {
    position: absolute;
    height:0px;
    width:0px;
    border-left: 100px solid blue;
    border-right: 100px solid green;
    border-bottom: 200px solid red;
  }

可在页面中看到如图5所示的图形。

 

图5  三个三角形拼成一个正方形

      修改上面样式中左、右或下边框的填充色为背景色或transparent,相当于切掉了该边框,这样可以组合为不同的三角形。

例如,修改.shape样式定义为:

  .shape
  {
    position: absolute;
    height:0px;
    width:0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid red;
  }

可在页面中看到如图6所示的等腰三角形。

图6  等腰三角形

又如,修改.shape样式定义为:

 .shape
  {
    position: absolute;
    height:0px;
    width:0px;
    border-left: 100px solid blue;
    border-bottom: 200px solid transparent;
  }

可在页面中看到如图7所示的直角三角形。

 

图7  直角三角形

再如,修改.shape样式定义为:

  .shape
  {
    position: absolute;
    height:0px;
    width:0px;
    border-right: 100px solid green;
    border-bottom: 100px solid transparent;
  }

可在页面中看到如图8所示的等腰直角三角形。

 

图8  等腰直角三角形

      (2)平行四边形和梯形。

      将一个矩形框进行倾斜,可以得到平行四边形。修改.shape样式定义为:

  .shape
  {
    position: absolute;
    height:100px;
    width:200px;
    background:#ff8c00;
    transform: skew(20deg);
  }

可在页面中看到如图9所示的平行四边形。

图9  平行四边形

修改.shape样式定义为:

 .shape
  {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 70px solid #ff8c00;
    position: relative;
    top:-50px;
  }
  .shape:after
  {
    content: '';
    position: absolute;
    top: 70px;
    left:-50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid #ff8c00;
  }

可在页面中看到如图10所示的菱形。

图10  菱形 

修改.shape样式定义为:

  .shape

  {

    position: absolute;

    width:100px;

    border-bottom: 150px solid red;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

  }

可在页面中看到如图11所示的梯形。

 

图11  梯形

      (3)圆、圆环和椭圆。

      利用border-radius属性可以为元素设置圆角边框,这样可以绘制各种圆形。

修改.shape样式定义为:

  .shape

  {

    position: absolute;

    width:150px;

    height:150px;

    background:#8A2BE2;

    border-radius:50%;

  }

可在页面中看到如图12所示的圆形。

图12  圆

      将上面绘制圆的样式中的height:150px;改成height:50px;,其余保持不变,则得到如图13所示的椭圆。

图13  椭圆

      将两个椭圆旋转后交叉在一起,可以构成一个红叉叉。修改.shape样式定义为:

  .shape

  {

    position: relative;

    width: 160px;

    height: 24px;

    background-color: #f00;

    transform: rotate(45deg);

    border-radius: 50%;

  }

  .shape:after

  {

    content: "";

    position: absolute;

    width: 160px;

    height: 24px;

    background-color: #f00;

    transform: rotate(90deg);

    border-radius: 50%;

  }

可在页面中看到如图14所示的红叉叉。

 

图14  红叉叉

修改.shape样式定义为:

  .shape

  {

    width: 100px;

    height: 50px;

    background: #8A2BE2;

    border-radius: 100px 100px 0 0;

  }

可在页面中看到如图15所示的半圆。

 

图15  半圆 

修改.shape样式定义为:

  .shape

  {

    width: 100px;

    height: 100px;

    background: #8A2BE2;

    border-radius: 100px 0 0 0;

  }

可在页面中看到如图16所示的四分之一圆(扇形)。

 

图16  扇形

修改.shape样式定义为:

  .shape 

  {

    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-radius: 50%;

  }

可在页面中看到如图17所示的图形,这个图形是游戏中的“食人豆”

图17  “食人豆”

修改.shape样式定义为:

  .shape 

  {

     width: 126px;

     height: 180px;

     background-color:#FFEFD5;

     border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;

  }

可在页面中看到如图18所示的鸡蛋。

 

图18  鸡蛋

修改.shape样式定义为:

  .shape 

  {

     width: 100px;

     height: 100px;

     border: 15px solid red;

     position: relative;

     border-radius: 50%;

  }

可在页面中看到如图19所示的圆环。

图19  圆环

      为一个圆环加上一个倾斜的手柄,可以绘制出一个放大镜。修改.shape样式定义为:

  .shape 

  {

     width: 64px;

     height: 64px;

     border: 10px solid black;

     position: relative;

     border-radius: 50%;

  }

  .shape:before

  {

     content: "";

     position: absolute;

     right: -40px;

     bottom: -16px;

     border-width: 0;

     background: black;

     width: 56px;

     height: 10px;

     transform: rotate(45deg);

  }

      可在页面中看到如图20所示的放大镜。

 

图20  放大镜

修改.shape样式定义为:

  .shape 

  {

     width: 100px;

     height: 100px;

     border: 15px solid white;

     position: relative;

     border-radius: 50%;

     border-top: 15px solid red;

     border-left: 15px solid orange;

     border-bottom: 15px solid green;

     border-right: 15px solid blue;

  }

可在页面中看到如图21四色圆环。

 

图21  四色圆环

修改.shape样式定义为:

  .shape 

  {

    width: 120px;

    height: 120px;

    border-left: 60px solid green;

    border-right: 60px solid blue;

    border-top: 60px solid red;

    border-radius: 50%;

  }

可在页面中看到如图22所示的不规则圆环。

图22  不规则圆环

      若保留图22中的红色,将另外两种颜色设为transparent,可在页面中看到如图23所示的扇面。若只保留蓝色,则可在页面中看到如图24所示的牛角。 

 

图23 扇面

图24  牛角

修改.shape样式定义为:

  .shape 

  {

    width: 0px;

    height: 0px;

    border-left: 60px solid transparent;

    border-right: 60px solid transparent;

    border-top: 120px solid red;

    border-radius: 50%;

  }

可在页面中看到如图25所示的圆锥形。

  

图 25  圆锥形

(4)多边形。

修改.shape样式定义为:

  .shape

  {

    position: relative;

    width: 54px;

    border-top: 50px solid red;

    border-left: 18px solid transparent;

    border-right: 18px solid transparent;

  }

  .shape:before

  {

    content: "";

    position: absolute;

    height: 0;

    width: 0;

    top: -85px;

    left: -18px;

    border-bottom: 35px solid red;

    border-left: 45px solid transparent;

    border-right: 45px solid transparent;

  }

       可在页面中看到如图26所示的五边形。这个五边形由两个基本图形拼合而成:一个是下面部分使用.shape定义的梯形,另一个是上面部分使用.shape:before定义的上三角形。三角形和梯形层叠到一起,从而形成五边形。

图26  五边形 

修改.shape样式定义为:

  .shape

  {

    width: 138.5px;

    height: 80px;

    background: red;

    position: relative;

  }

  .shape:before

  {

    content: "";

    position: absolute;

    top: -40px;

    left: 0;

    width: 0;

    height: 0;

    border-left: 69.25px solid transparent;

    border-right: 69.25px solid transparent;

    border-bottom: 40px solid red;

  }

  .shape:after

  {

    content: "";

    position: absolute;

    bottom: -40px;

    left: 0;

    width: 0;

    height: 0;

    border-left: 69.25px solid transparent;

    border-right: 69.25px solid transparent;

    border-top: 40px solid red;

  }

     可在页面中看到如图27所示的六边形。这个六边形由三个基本图形拼合而成:一个是中间部分使用.shape定义的矩形,另一个是上面部分使用.shape:before定义的上三角形,还有一个是下面部分使用.shape:after定义的下三角形。三个基本图形层叠到一起,从而形成六边形。并且图中的六边形还是一个正六边形。

 

图27  六边形 

修改.shape样式定义为:

  .shape

  {

    width: 120px;

    height: 50px;

    background: red;

    position: relative;

  }

  .shape:before

  {

    content: "";

    position: absolute;

    top: -35px;

    left: 0;

    border-bottom: 35px solid red;

    border-left: 35px solid transparent;

    border-right: 35px solid transparent;

    width: 50px;

    height: 0;

  }

  .shape:after

  {

    content: "";

    position: absolute;

    top: 50px;

    left: 0;

    border-top: 35px solid red;

    border-left: 35px solid transparent;

    border-right: 35px solid transparent;

    width: 50px;

    height: 0;

  }

        可在页面中看到如图28所示的八边形。这个八边形由三个基本图形拼合而成:一个是中间部分使用.shape定义的矩形,另一个是上面部分使用.shape:before定义的底边大于顶边的梯形,还有一个是下面部分使用.shape:after定义的底边小于顶边的梯形。三个基本图形层叠到一起,从而形成八边形。并且图中的八边形还是一个近似正八边形。

 

图28  八边形

(5)多角星。

修改.shape样式定义为:

.shape

 {

    position: relative;

    display: block;

    width:0px;

    height:0px;

    border-left:  100px solid transparent;

    border-right: 100px solid transparent;

    border-bottom:70px  solid red;

    transform:rotate(35deg);

  }

  .shape:before

  { 

    content: '';

    position: absolute;

    width: 0px; 

    height: 0px;

    top: -45px;

    left: -62.5px;

    border-left:   30px solid transparent;

    border-right:  30px solid transparent;

    border-bottom: 80px solid green;

    transform: rotate(-35deg);

  }

  .shape:after

  { 

    content: '';

    position: absolute;

    width: 0px;

    height: 0px;

    top: 3px;

    left: -105px;

    border-left: 100px solid transparent;

    border-right: 100px solid transparent;

    border-bottom: 70px solid blue;

    transform:rotate(-70deg);

  }

      可在页面中显示如图29所示的五角星。这个五角星是由三个三角形拼成的,由于文字描述不能精确,为了方便理解,将三个三角形设置成不同的颜色。

 

图29  五角星 

修改.shape样式定义为:

  .shape

  {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

    position: relative;

  }

  .shape:after

  {

    content: "";

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid red;

    position: absolute;

    top: 30px;

    left: -50px;

  }

      可在页面中看到如图30所示的六角星。这个六角星是由两个三角形拼合而成的,一个三角形是使用.shape定义的上三角形,另一个是使用.shape:after定义的下三角形。它们层叠到一起,从而形成六角星。

图30  六角星 

修改.shape样式定义为:

  .shape

  {

    background: red;

    width: 150px;

    height: 150px;

    position: relative;

  }

  .shape:after

  {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 150px;

    width: 150px;

    background: red;

    transform: rotate(45deg);

  }

      可在页面中看到如图31所示的八角星。这个八角星由两个正方形拼合而成:一个正方形是使用.shape定义的,另一个是使用.shape:after定义的,它旋转了45°。两个正方形层叠到一起,从而形成八角星。

图31  八角星 

修改.shape样式定义为:

  .shape

  {

    background: red;

    width: 150px;

    height: 150px;

    position: relative;

  }

  .shape:before, .shape:after

  {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 150px;

    width: 150px;

    background: red;

  }

  .shape:before

  {

    transform: rotate(30deg);

  }

  .shape:after

  {

    transform: rotate(60deg);

  }

      可在页面中看到如图32所示的十二角星。这个十二角星由三个正方形拼合而成:一个正方形是使用.shape定义的,另一个是使用.shape:before定义的,它旋转了30°,还有一个是使用.shape:after定义的,它 旋转了60°。三个正方形层叠到一起,从而形成十二角星。

 

图32  十二角星 

(6)其他组合图形。

修改.shape样式定义为:

  .shape 

  {

    position: relative;

    width: 20px;

    height: 100px;   

    background: red;

  }

  .shape:after

  {

    content: "";

    position: absolute;

    left: -40px;

    top: 40px;

    width: 100px; 

    height: 20px;

    background: red;

  }

可在页面中看到如图33所示的红十字。

图33  红十字

修改.shape样式定义为:

  .shape 

  {

    position: relative;

    width: 100px;

    height: 90px;

  }

  .shape:before, .shape:after

  {

    position: absolute;

    content: "";

    left: 50px;

    top: 0;

    width: 50px;

    height: 80px;

    background: red;

    border-radius: 50px 50px 0 0;

    transform: rotate(-45deg);

    transform-origin: 0 100%;

  }

  .shape:after

  {

    left: 0;

    transform: rotate(45deg);

    transform-origin :100% 100%;

  }

可在页面中看到如图34所示的心形。

图34  心形 

修改.shape样式定义为:

  .shape 

  {

    border-style: solid;

    border-color: transparent transparent #FFFAFA transparent;

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

    height: 0;

    width: 50px;

    position: relative;

  }

  .shape:after

  {

    content: "";

    position: absolute;

    top: 25px;

    left: -25px;

    width: 0;

    height: 0;

    border-style: solid;

    border-color: #FFFAFA transparent transparent transparent;

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

  }

可在页面中看到如图35所示的钻石。

 

图35  钻石 

修改.shape样式定义为:

  .shape 

  {

    position: relative;

    width: 212px;

    height: 100px;

  }

  .shape:before, .shape:after

  {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 60px;

    height: 60px;

    border: 20px solid red;

    border-radius: 50px 50px 0 50px;

    transform: rotate(-45deg);

  }

  .shape:after

  {

    left: auto;

    right: 0;

    border-radius: 50px 50px 50px 0;

    transform: rotate(45deg);

  }

可在页面中看到如图36所示的无穷大符号。

图36  无穷大

修改.shape样式定义为:

  .shape

  {    

     position: relative;

     width:80px;

     height:80px;

     border: 15px solid transparent;

     border-top-color: red;

     border-bottom-color: red;

     border-radius: 50%;

  }

  .shape:before, .shape:after

  {

     content: '';

     display: block;

     width: 0;

     height: 0;

     position: absolute;

     border: 15px solid transparent;

     border-bottom-color: red;

   }

  .shape:before

  {

     transform: rotate(135deg);

     right: -15px;

     top: -2.5px;

  }

  .shape:after

  {

     transform: rotate(-45deg);

     left: -15px;

     bottom: -2.5px;

  }

可在页面中看到如图37所示的圆弧箭头。

图37  圆弧箭头

2.利用box-shadow绘制图形

       在CSS中,属性box-shadow用于给对象实现图层阴影效果。利用box-shadow属性也可以绘制图形。

      box-shadow的基本格式为:

            box-shadow: h-shadow v-shadow blur spread color inset;

       各参数的含义说明如下:

       h-shadow必须设置,它表示阴影的水平偏移量,其值可以取正负值,如果值为正值,则阴影在对象的右边;若值为负值时,阴影在对象的左边。

       v-shadow也必须设置,它表示阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部;其值为负值时,阴影在对象的顶部。

       blur可选,表示阴影模糊半径,其值只能是为正值,如果值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊。

       Spread可选,表示阴影扩展半径,其值可以是正负值,如果值为正,则整个阴影都延展扩大;若值为负值时,则缩小。

       Color可选,表示阴影颜色。

       Inset可选,表示阴影类型。其默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影。

       另外,box-shadow可以使用一个或多个投影,如果使用多个投影时,必须用逗号分开。

       例如,若定义.shape样式规则如下:

.shape

 {

    width: 80px;

    height: 60px;

    background: #ff008c;

    border: 6px solid blue;

    box-shadow: 40px 30px green;

  }

则在页面中显示如图38所示的图形。

 

图38  绿色投影(outset)

       若在box-shadow定义中加上inset,则显示的图形如图39所示。

 

图39  绿色投影(inset)

      由此可知,对象阴影同box模型的层次一样,外阴影会在对象背景之下,内阴影会在边框之下背景之上。所以整个层级就是:边框>内阴影>背景图片>背景颜色>外阴影。

      利用box-shadow属性,我们可以在页面中绘制图形。

例如,修改.shape样式定义为:

  .shape

  {    

    width: 0;

    color: #f00;

    border: 15px solid transparent;

    border-top: 25px solid;

    box-shadow: 0 -32px 0 -6px;

  }

可在页面中显示如图40所示的下载箭头。

 

图40  下载箭头

      一般而言,一个div之类的元素通过设置border属性可以绘制一个基本图形,加上:before和:after两个伪类,最多可进行三个基本图形组合。若需要更多图形组合,border属性就有点无能为力了,增加div的定义个数是一种办法。有时,通过box-shadow属性设置多个投影来解决,可能更方便。这也是box-shadow属性的一大优势。

       例如,修改.shape样式定义为:

  .shape

  {    

     width: 40px;

     height: 0;

     color: red;

     box-shadow: 20px 20px 0 4px ,20px 0 0 4px ,20px 40px 0 4px;

  }

可在页面中显示如图41所示的图形。

 

图41  三道杠

再修改.shape样式定义为:

  .shape

  {    

     width: 40px;

     height: 0;

     color: red;

     box-shadow: 20px 20px 0 3px ,20px 0 0 3px ,20px 40px 0 3px,

                 20px 10px 0 3px ,20px 30px 0 3px;

  }

可在页面中显示如图42所示的五道杠。

 

图42  五道杠

修改.shape样式定义为:

  .shape

  {    

     position: relative;

     width:80px;

     height:80px;

     box-shadow:-30px 0px 0px red,0px -30px 0px yellow,

            30px 0px 0px green,0px 30px 0px blue;

  }

可在页面中显示如图43所示的图形。

 

图43  四色方框

修改.shape样式定义为:

  .shape

  {    

     position: relative;

     width: 40px;

     height: 40px;

     background-color: black;

     border-radius: 50%;

     box-shadow: 0 0 0 15px #fff,0 0 0 25px #000;

  }

可在页面中显示如图44所示的单选按钮。

 

图44 单选按钮

修改.shape样式定义为:

  .shape

  {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    box-shadow: 15px 15px 0 0 white;

  }

可在页面中看到如图45所示的弯月。

图45  弯弯的月亮

修改.shape样式定义为:

  .shape

  {    

    width: 40px;

    height: 40px;

    background: #fff;

    border-radius: 50%;

    box-shadow: #fff 22px -15px 0 6px, #fff 57px -6px 0 2px, #fff 87px 4px 0 -4px,

                #fff 33px 6px 0 6px, #fff 61px 6px 0 2px, #ccc 29px -23px 0 6px,

                #ccc 64px -14px 0 2px, #ccc 94px -4px 0 -4px;

  }

可在页面中看到如图46所示的云朵。

 

图46  云朵

修改.shape样式定义为:

  .shape

  {    

    width:160px;

    height:160px;

    border-radius: 50%;

    box-shadow: inset 0 0 0 16px  #fff,

               -80px -80px 0 -64px #f00,

               0 -112px 0 -64px #f0f,

               80px -80px 0 -64px #ff0,

               -80px 80px 0 -64px #0f0,

               0 112px 0 -64px #0ff,

               80px 80px 0 -64px #00f,

               -112px 0 0 -64px #808,

               112px 0 0 -64px #000; 

  }

可在页面中看到如图47所示的图形,在一个圆环的周围围了8个小圆。

 

图47  圆环周围的小圆

本文来源于网络:查看 >
« 上一篇:CSS动画实例:小圆球的海洋
» 下一篇:express生成器的使用
评论
点击刷新
评论
相关博文
×添加代码片段