11/10/2018, 21:20

Bài 24 - Tạo các khối hình học bằng CSS3 (phần 1)

1. Lời nói đầu Chào các bạn, Đã khi nào các bạn gặp rắc rối trong việc tạo các khối hình học vuông, tròn, tam giác chưa? Có lẽ không ít bạn từng gặp phải trường hợp oái oăm là tạo 1 tam giác nhưng chỉnh mãi vẫn không đúng design và cuối cùng đành dùng biện pháp là cắt ảnh. Mà cắt ảnh thì cũng ...

1. Lời nói đầu

Chào các bạn,

Đã khi nào các bạn gặp rắc rối trong việc tạo các khối hình học vuông, tròn, tam giác chưa? Có lẽ không ít bạn từng gặp phải trường hợp oái oăm là tạo 1 tam giác nhưng chỉnh mãi vẫn không đúng design và cuối cùng đành dùng biện pháp là cắt ảnh. Mà cắt ảnh thì cũng không ổn chút nào, chẳng lẽ mỗi 1 màu thì phải cắt từng đó ảnh? Như vậy thì không vui chút nào nhỉ? Vì vậy, ở bài viết này, mình sẽ hướng dẫn các bạn tạo một số khối hình học chỉ bằng HTML & CSS3. Let's go!

2. Tạo hình tròn

Tạo khối hình tròn khá đơn giản. Mấu chốt để tạo nên hình tròn là ở thuộc tính border-radius trong CSS3.

HTML

<div class="row">
  <div class="block col-md-4">
    <div class="circle red ">Red</div>
  </div>

  <div class="block col-md-4">
    <div class="circle green ">Green</div>
  </div>

  <div class="block col-md-4">
    <div class="circle blue ">Blue</div>
  </div>
</div>

CSS

.circle {
  awidth: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 16px;

  &.red {
    background-color: red;
  }

  &.green {
    background-color: green;
  }

  &.blue {
    background-color: blue;
  }
}

Result

3. Tạo hình Oval

Như phần tạo hình tròn ở trên các bạn đã thấy rất đơn giản đúng không? Với việc tạo hình oval này thì chúng ta vẫn chỉ sử dụng thuộc tính border-radius mà thôi. Còn sử dụng như thế nào thì hãy xem demo dưới đây nhé.

Ở phần tạo oval thì có 2 trường hợp: oval nằm ngang và oval đứng. HTML của 2 trường hợp này như nhau cho nên mình chỉ tạo HTML một lần thôi nhé.

HTML

div class="row">
  <div class="block col-md-4">
    <div class="oval red ">Red</div>
  </div>

  <div class="block col-md-4">
    <div class="oval green ">Green</div>
  </div>

  <div class="block col-md-4">
    <div class="oval blue ">Blue</div>
  </div>
</div>

3.1 Tạo hình oval ngang

CSS

.oval {
  awidth: 160px;
  height: 80px;
  -moz-border-radius: 80px / 40px;
  -webkit-border-radius: 80px / 40px;
  border-radius: 80px / 40px;
  text-align: center;
  line-height: 80px;
  color: #fff;
  font-size: 16px;

  &.red {
    background-color: red;
  }

  &.green {
    background-color: green;
  }

  &.blue {
    background-color: blue;
  }
}

Result

3.2 Tạo hình oval dọc

CSS

.oval {
  awidth: 80px;
  height: 160px;
  -moz-border-radius: 40px / 80px;
  -webkit-border-radius: 40px / 80px;
  border-radius: 40px / 80px;
  text-align: center;
  line-height: 160px;
  color: #fff;
  font-size: 16px;

  &.red {
    background-color: red;
  }

  &.green {
    background-color: green;
  }

  &.blue {
    background-color: blue;
  }
}

Result

Nếu bạn nào tinh ý sẽ nhìn thấy, các giá trị của thuộc tính border-radius sẽ khác hoàn toàn so với khi sử dụng để tạo hình tròn. Nếu như các giá trị này mà bạn thấy khó hiểu thì hãy chuyển sang sử dụng như thế này

-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;

Như vậy thì vẫn có thể tạo thành hình oval theo cách rất đơn giản. Nhưng nhớ, để tạo được oval thì awidth phải luôn lớn hơn height (trong trường hợp oval ngang) hoặc height lớn hơn awidth (trong trường hợp oval dọc), nếu không hình bạn tạo ra là hình tròn đấy.

4. Tạo hình tam giác nhọn

Tạo hình tam giác có khác biệt hoàn toàn với tạo hình tròn và oval. Nếu như ở 2 hình trên chúng ta sử dụng thuộc tính border-radius thì ở phần tạo hình tam giác chúng ta chỉ sử dụng border mà thôi. Còn sử dụng như thế nào thì cùng xem ví dụ dưới đây nhé.

4.1. Tam giác nhọn quay lên

HTML

<div class="row">
  <div class="block col-md-4">
    <div class="triangle-up red "></div>
  </div>

  <div class="block col-md-4">
    <div class="triangle-up green "></div>
  </div>

  <div class="block col-md-4">
    <div class="triangle-up blue "></div>
  </div>
</div>

CSS

.triangle-up {
  awidth: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid black;

  &.red {
    border-bottom-color: red;
  }

  &.green {
    border-bottom-color: green;
  }

  &.blue {
    border-bottom-color: blue;
  }
}

Demo

4.2. Tam giác nhọn quay xuống

HTML

<div class="row">
  <div class="block col-md-4">
    <div class="triangle-down red "></div>
  </div>

  <div class="block col-md-4">
    <div class="triangle-down green "></div>
  </div>

  <div class="block col-md-4">
    <div class="triangle-down blue "></div>
  </div>
</div>

CSS

.triangle-down {
  awidth: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid black;

  &.red {
    border-top-color: red;
  }

  &.green {
    border-top-color: green;
  }

  &.blue {
    border-top-color: blue;
  }
}

Demo

4.3. Tam giác nhọn quay trái

HTML

<div class="row">
  <div class="block col-md-4">
    <div class="triangle-left red "></div>
  </div>

  <div class="block col-md-4">
    <div class="triangle-left green "></div>
  </div>

  <div class="block col-md-4">
    <div class="triangle-left blue "></div>
  </div>
</div>

CSS

.triangle-left {
  awidth: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid black;
  border-bottom: 50px solid transparent;

  &.red {
    border-right-color: red;
  }

  &.green {
    border-right-color: green;
  }

  &.blue {
    border-right-color: blue;
  }
}

Demo

4.4. Tam giác nhọn quay phải

HTML

<div class="row">
  <div class="block col-md-4">
    <div class="triangle-right red "></div>
  </div>

  <div class="block col-md-4">
    <div class="triangle-right green "></div>
  </div>

  <div class="block col-md-4">
    <div class="triangle-right blue "></div>
  </div>
</div>

CSS

.triangle-right {
  awidth: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid black;
  border-bottom: 50px solid transparent;

  &.red {
    border-left-color: red;
  }

  &.green {
    border-left-color: green;
  }

  &.blue {
    border-left-color: blue;
  }
}

Demo

Như vậy, qua phần 1 này chắc các bạn cũng đã hiểu được cách tạo các hình tròn, oval và tam giác theo các hướng rồi phải không? Điểm mấu chốt chúng ta cần hiểu được là thuộc tính gì sẽ quyết định việc tạo ra các khối hình đó.

Trong phần tạo khối tam giác thì ở phần 1 này mình mới chỉ giới thiệu đến cách tạo tam giác nhọn, còn tạo tam giác vuông và các khối hình khác như thế nào thì mình sẽ giới thiệu tiếp ở bài sau nhé.

Bài liên quan

Bài 25 - Tạo các khối hình học bằng CSS3 (phần 2)

Chào các bạn, Ở bài trước, mình đã nói tới cách tạo 1 số khối hình học đơn giản bằng HTML/CSS. Để tiếp tục với seri Tạo khối hình học bằng CSS3 , hôm nay mình tiếp tục giới thiệu cách tạo 1 số khối hình học khác nữa. Các bạn có thể theo dõi bài 1 tại đây nhé: Tạo các khối hình học bằng CSS3 ...

Trần Trung Dũng viết 23:02 ngày 16/11/2018

Bài 24 - Tạo các khối hình học bằng CSS3 (phần 1)

1. Lời nói đầu Chào các bạn, Đã khi nào các bạn gặp rắc rối trong việc tạo các khối hình học vuông, tròn, tam giác chưa? Có lẽ không ít bạn từng gặp phải trường hợp oái oăm là tạo 1 tam giác nhưng chỉnh mãi vẫn không đúng design và cuối cùng đành dùng biện pháp là cắt ảnh. Mà cắt ảnh thì cũng ...

Trịnh Tiến Mạnh viết 21:20 ngày 11/10/2018

Tạo hiệu ứng Fixed Background bằng CSS3

Hôm nay mình sẽ giới thiệu cho các bạn một mẫu background dùng khi thiết kế web bằng cách tận dụng thuộc tính background-attachment để tạo hiệu ứng fixed background. Còn hiệu ứng fixed background là gì ? Thì các bạn xem demo ở phía dưới là sẽ hiểu. Xem Demo | Download HTML Cấu ...

Tạ Quốc Bảo viết 20:06 ngày 04/10/2018

Tạo iOS 7 Progress Bar bằng CSS3

Hôm nay mình tranh thủ giới thiệu cho các bạn thêm một mẫu progress bar cực kỳ ấn tượng với hiệu ứng như trên iOS 7. Xem Demo | Download HTML Đầu tiên, các bạn áp dụng khung chuẩn html như sau : <div class="progress"> <div class="progress-bar&quo ...

Trịnh Tiến Mạnh viết 20:05 ngày 04/10/2018

Hướng dẫn tạo Photo Gallery cực pro bằng CSS3

Bạn cần quản lý hình ảnh trong website của bạn ? Bạn bối rối khi chưa rành về Flash hay javacript ? Đừng quá lo lắng về điều đó, vì hôm nay mình sẽ giúp các bạn tạo ứng dụng Photo Gallery cho web của bạn chỉ với CSS. Các bạn có thể xem demo bài viết tại đây. Bước 1 : HTML Đây là code ...

Trịnh Tiến Mạnh viết 20:00 ngày 04/10/2018
0