Để tạo các hình dạng khác nhau bằng CSS, mã như sau -
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> div { display: inline-block; margin: 20px; } .square { width: 100px; height: 100px; background: rgb(23, 153, 121); border: 3px solid darkblue; } .rectangle { width: 200px; height: 100px; background: rgb(255, 232, 21); border: 3px solid rgb(42, 0, 70); } .circle { width: 100px; height: 100px; background: rgb(0, 255, 13); border: 3px solid rgb(27, 0, 78); border-radius: 50%; } </style> </head> <body> <h1>Different Shapes in CSS example</h1> <div class="square"></div> <div class="rectangle"></div> <div class="circle"></div> </body> </html>
Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -