สร้างรูปทรงต่างๆ ด้วย css3 ง่ายนิดเดียว

ด้วยความที่อยากทดลองสร้างรูปทรงอื่นๆ ที่ไม่ใช่ สี่เหลี่ยม โดยใช้แค่ html และ css เลยลองหาข้อมูลจากเว็บต่างๆ จนในที่สุดก็ได้ค้นพบวิธีสร้างรูปทรงสวยงามต่างๆมาแบ่งปันค่ะ ^_^

การสร้างรูปทรงต่างๆ นอกเหนือจากสี่เหลี่ยมโดยใช้ css นั้น ต้องบอกว่า css2 ไม่สามารถทำได้ค่ะ แต่ด้วยคำสั่งใหม่ที่เพิ่มเข้ามาใน css3 นี้ ทำให้เราสามารถเอามาดัดแปลงและประยุกต์ใช้ได้อย่างมากมายค่ะ ถ้าหากเพื่อนๆ สนใจเรื่องนี้อยู่แล้วและยังไม่ได้ลอง เรามีตัวอย่างง่ายๆ ให้ดูค่ะ

โค้ด HTML

<div class="ok">
    <span title="o">o</span>
    <span title="k">k</span>
</div>

</div>

โค้ด CSS

div[class="ok"]>span { display:block; text-indent:-9999px; background:#F90; float:left; margin-right:10px; }
span[title="o"] { width: 100px; height:100px; border-radius: 50%; position: relative; }
span[title="o"]:after { content: " "; display:block; width:50px; height:50px; background:#fff; border-radius: 50%; position:absolute; left:24%; top:24%; }
span[title="k"] { width: 25px; height:100px; position:relative; }
span[title="k"]:before, span[title="k"]:after { content: " "; display:block; width: 25px; height:70px; position:absolute; background:#f90; }
span[title="k"]:before { left:30px; top: -3px; -moz-transform:rotate(48deg); -webkit-transform:rotate(48deg); -o-transform:rotate(48deg); -ms-transform:rotate(48deg); }
span[title="k"]:after { left:32px; top:36px; -moz-transform:rotate(125deg); -webkit-transform:rotate(125deg); -o-transform:rotate(125deg); -ms-transform:rotate(125deg); }

div[class="ok"]>span { display:block; text-indent:-9999px; background:#F90; float:left; margin-right:10px; }

span[title="o"] { width: 100px; height:100px; border-radius: 50%; position: relative; }

span[title="o"]:after { content: " "; display:block; width:50px; height:50px; background:#fff; border-radius: 50%; position:absolute; left:24%; top:24%; }

span[title="k"] { width: 25px; height:100px; position:relative; }

span[title="k"]:before, span[title="k"]:after { content: " "; display:block; width: 25px; height:70px; position:absolute; background:#f90; }

span[title="k"]:before { left:30px; top: -3px; -moz-transform:rotate(48deg); -webkit-transform:rotate(48deg); -o-transform:rotate(48deg); -ms-transform:rotate(48deg); }

span[title="k"]:after { left:32px; top:36px; -moz-transform:rotate(125deg); -webkit-transform:rotate(125deg); -o-transform:rotate(125deg); -ms-transform:rotate(125deg); }

สำหรับวันนี้ขอจบไว้แต่เพียงเท่านี้ค่ะ คราวหน้ามาพบกับเรื่อง css สนุกๆ แบบนี้ได้ใหม่นะคะ ^ ^