สร้างสี่เหลี่ยม CSS พื้นที่สี่เหลี่ยม

สร้างสี่เหลี่ยม CSS พื้นที่สี่เหลี่ยม บทความนี้สอนสร้างสี่เหลี่ยม โดยกำหนดความกว้าง และความสูงด้วยคำสั่ง width และ height พร้อมกำหนดเส้นขอบ และสีของสี่เหลี่ยมด้วยคำสั่ง border สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง สร้างสี่เหลี่ยม CSS พื้นที่สี่เหลี่ยม

<style>
    .box {
        width: 200px;
        height: 200px;
        border: solid 1px black;
        background-color: cadetblue;        
    }
</style>

<div class="box"></div>

สร้างสี่เหลี่ยม CSS จากตัวอย่างสร้าง class ชื่อ box กำหนดความกว้าง 200px ด้วย width และความสูง 200px ด้วย height พร้อมกำหนดเส้นขอบด้วย border และพื้นหลังของสี่เหลี่ยมด้วยคำสั่ง background-color และนำไปแสดงผลที่หน้าเว็บไซต์ผ่าน div class="box" ภาษา HTML และ CSS