Đã đăng vào thg 1 15, 2017 4:55 SA 0 phút đọc
Các hình dưới đây đều chỉ dùng một HTML element.
Hình vuông
#square {
width: 100px;
height: 100px;
background: red;
}
Hình chữ nhật
#rectangle {
width: 200px;
height: 100px;
background: red;
}
Hình tròn
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Hình oval
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Hình tam giác [đỉnh ở trên]
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
Hình tam giác [đỉnh ở dưới]
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
Hình tam giác [đỉnh ở bên trái]
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
Hình tam giác [đỉnh ở bên phải]
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
Hình tam giác vuông [góc vuông ở góc trên trái]
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
Hình tam giác vuông [góc vuông ở góc trên phải]
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
Hình tam giác vuông [góc vuông ở góc dưới trái]
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
Hình tam giác vuông [góc vuông ở góc dưới phải]
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
Source: //css-tricks.com/examples/ShapesOfCSS/
All rights reserved