Hướng dẫn hình css

Nội dung bài viết

Video học lập trình mỗi ngày

CSS có thể tạo ra nhiều hình dạng khác nhau. Hình vuông và hình chữ nhật rất dễ dàng vì chúng là hình dạng tự nhiên của web. Thêm chiều rộng và chiều cao, và bạn có được hình chữ nhật chính xác mà bạn cần. Thêm bán kính đường viền, bạn có thể biến hình dạng này thành một vòng tròn. Với đủ bán kính đường viền, bạn có thể biến các hình chữ nhật này thành hình tròn và hình elip. 

Tôi rất hiểu những bạn làm về backend đó là đa số là có kiến thức rất mơ hồ về CSS. Ngay cả bản thân tôi, tôi cũng rất yếu về mảng css này. Chính vì điều đó mà tôi khi có cơ hội là tôi luôn viết lại trong collection của tôi và hôm nay tôi cũng muốn share cho các bạn một bài viết của css-tricks.com. Ngoài ra các bạn cũng có thể tìm hiểu những bài viết giúp bạn nâng cao về css tại "thủ thuật về css"

1 - Cách tạo hình vuông trong css

#square {
      width: 100px;
      height: 100px;
      background: red;
}

2. Tạo hình chữ nhật trong css

#rectangle {
  width: 200px;
  height: 100px;
  background: red;
}

3. Tạo hình tròn với css

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

4. Tạo hình bầu dục (oval) với css

#oval {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}

5. Tạo hình tam giác up với css

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

6. Tạo hình tam giác dưới

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

7. Tạo hình tam giác hướng về phía trái với css

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

8. Tạo hình tam giác hướng về phía phải

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

9. Góc trên bên trái

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

10. Góc trên bên phải

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

11. Góc dưới bên trái

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

12. Góc dưới bên phải

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

13. Mũi tên img

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
}

#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}

14. Hình thang trong css

#trapezoid {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}

15. Hình bình hành trong css

#parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: red;
}

Trên đây là một số mẫu tạo hình dạng với css. Ngoài ra còn rất nhiều thủ thuật nữa về css các bạn có thể đọc ở đây. css-tricks.com