สำนักวิทยบริการและเทคโนโลยีสารสนเทศ (สวส.)

Office of Academic Resources and Information Technology

การสร้างรูปทรงเรขาคณิตด้วย CSS3

การนำ CSS3 เข้ามาใช้งานสำหรับผู้พัฒนาเว็บนั้น จะช่วยในเรื่องของการกินทรัพยากรของเว็บได้พอสมควร เพราะแทนที่จะใช้ไฟล์รูปภาพ แต่เมื่อนำเอาเทคนิค การสร้างรูปด้วย CSS3 ไปใช้แล้ว จะเห็นความแตกต่างได้อย่างชัดเจนในเรื่องของการประหยัดพื้นที่และการโหลดข้อมูล อีกทั้งยังสะดวกสำหรับงานที่ไม่จำเป็นต้องใช้ภาพ มาดูตัวอย่างของการสร้างรูปภาพด้วย CSS3 กันเลย

 

รูปวงกลม

CSS:

#circle { 

width: 140px; /* ความกว้าง */

height: 140px; /* ความสูง */

background: red; /* สี */

-moz-border-radius: 70px; 

-webkit-border-radius: 70px; 

border-radius: 70px;

}

HTML :

<div id="circle"></div>

 

รูปสีเหลี่ยม

CSS:

#square {

width: 140px; 

height: 140px; 

background: blue; 

}

HTML :

<div id="square "></div>

 

รูปวงรี

CSS:

#oval {

width: 200px; 

height: 100px; 

background: purple; 

-moz-border-radius: 100px / 50px; 

-webkit-border-radius: 100px / 50px; 

border-radius: 100px / 50px;

}

HTML :

<div id="oval"></div>

 

รูปสามเหลี่ยม

CSS:

#up-triangle {

width: 0; 

height: 0; 

border-bottom: 120px solid green; 

border-left: 60px solid transparent; 

border-right: 60px solid transparent; 

}

HTML :

<div id="up-triangle"></div>

 

รูปสี่เหลี่ยมผืนผ้า

CSS:

#rectangle {

width: 140px; 

height: 80px;

background: green;

}

HTML :

<div id="rectangle"></div>

 

รูปสี่เหลี่ยมด้านขนาน

CSS:

#parallelogram {

width: 130px; 

height: 75px;

background: pink;

/* Skew */

-webkit-transform: skew(20deg); 

-moz-transform: skew(20deg); 

-o-transform: skew(20deg);

transform: skew(20deg);

}

HTML :

<div id="parallelogram"></div>

 

รูปดาว 6 แฉก

CSS:

#six-point-star {

position: absolute;

width: 0; 

height: 0; 

border-left: 50px solid transparent; 

border-right: 50px solid transparent; 

border-bottom: 80px solid red;

}

#six-point-star:after {

content:"";

position: absolute;

width: 0; 

height: 0; 

border-left: 50px solid transparent; 

border-right: 50px solid transparent; 

border-top: 80px solid red;

margin: 30px 0 0 -50px;

}

HTML :

<div id="six-point-star"></div>

 

รูปทรง 8 เหลี่ยม

CSS:

#octagon {

width: 100px; 

height: 100px; 

background: blue;

}

#octagon:before {

height: 0;

width: 40px;

content:"";

position: absolute; 

border-bottom: 30px solid blue;

border-left: 30px solid white; 

border-right: 30px solid white; 

}

#octagon:after {

height: 0;

width: 40px;

content:"";

position: absolute; 

border-top: 30px solid blue; 

border-left: 30px solid white;  

border-right: 30px solid white; 

margin: 70px 0 0 0;

}

HTML :

<div id="octagon"></div>

 

รูปทรงไข่

CSS:

#egg {

display:block;

width:126px; 

/* width has to be 70% of height */

/* could use width:70%; in a square container */

height:180px;

background-color:green;

 

/* beware that Safari needs actual

px for border radius (bug) */

-webkit-border-radius:63px 63px 63px 63px/

108px 108px 72px 72px;

/* fails in Safari, but overwrites in Chrome */

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

}

HTML :

<div id="egg"></div>

 

รูปหัวใจ

CSS:

#heart { 

position: relative;

}

#heart:before, #heart:after {

position: absolute;

content: "";

left: 70px; top: 0;

width: 70px;

height: 115px;

background: red;

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

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after { 

left: 0; 

-webkit-transform: rotate(45deg); 

-moz-transform: rotate(45deg); 

-ms-transform: rotate(45deg); 

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

HTML :

<div id="heart"></div>




     
  • อ้างอิง
    --http://www.softmelt.com/article.php?id=452--

  •