สร้าง Div รูปทรงไม่สม่ำเสมอ (Irregular Shapes) ด้วย CSS3 และ HTML5

CSS Shapes: สร้างรูปทรงด้วย Border และ Transform

สี่เหลี่ยม (Rectangle)

#shape1 {
    width: 300px;
    height: 150px;
    background: blue;
}

สามเหลี่ยม (Triangle)

#shape2 {
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 200px solid blue;
}

วงกลม (Circle)

#shape3 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
}

รูปทรงซับซ้อน: ใช้ clip-path หรือ SVG

.complex-shape {
    width: 200px;
    height: 200px;
    background: green;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); // Diamond
}

clip-path รองรับ Polygon, Circle, Ellipse, Inset SVG Path ได้รูปทรงอะไรก็ได้