Cách Xây Dựng CSS Shape Hiệu Quả Trong Thiết Kế Web

Bạn đang xem: Cách Xây Dựng CSS Shape Hiệu Quả Trong Thiết Kế Web

Cách Xây Dựng CSS Shape Hiệu Quả Trong Thiết Kế Web

CSS Shape Là Gì?

CSS Shape là những dạng khối hình học được xây dựng bằng CSS và nó cũng rất gần gũi với chúng ta ví dụ như là hình chữ nhật, hình vuông, hình tròn, hình oval… Đối với hình vuông và hình chữ nhật thì chúng ta có thể dễ dàng tạo ra được vì hai hình học này được xem là mặc định trong trang web truyền thống(thiết kế chỉ xây dựng bằng lưới, box và những đường thẳng). Còn với các hình có độ phức tạp cao hơn như hình tròn, elip… thì chúng ta cần thêm một số thuộc tính CSS khác như là bán kính đường viền, độ bo góc của hình…

Theo mình thấy, hiện nay các trang web ngày càng được thiết kế hiện đại với các bố cục tự do nhằm thỏa mãn tính sáng tạo của designer cũng như tăng tính trải nghiệm của người dùng khi sử dụng trang web.

Do đó bài viết hôm nay chúng ta sẽ đi vào tìm hiểu các shape CSS từ cơ bản đến nâng cao nhé!

Xây Dựng Hình Tròn Bằng CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình tròn bằng CSS nhé!

HTML

 <h2>Hình Tròn CSS</h2>
 <div class="hinh_tron"></div>

CSS

.hinh_tron{
   width: 100px;
   height: 100px;
   background: #1E90FF;
   border-radius: 50%
 }

Và đây là dự án vẽ hình tròn trên Codepen nha:

See the Pen Hình Tròn CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Vuông Bằng CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình vuông bằng CSS nhé!

HTML

 <h2>Hình Vuông CSS</h2>
 <div class="hinh_vuong"></div>

CSS

.hinh_vuong{
   width: 100px;
   height: 100px;
   background: #1E90FF;
 }

Và đây là dự án vẽ hình vuông trên Codepen nha:

See the Pen Hình Vuông CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Chữ Nhật Bằng CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình chữ nhật bằng CSS nhé!

HTML

 <h2>Hình Chữ Nhật CSS</h2>
 <div class="hinh_chu_nhat"></div>

CSS

.hinh_chu_nhat{
   width: 200px;
   height: 100px;
   background: #1E90FF;
 }

Và đây là dự án vẽ hình chữ nhật trên Codepen nha:

See the Pen Hình Chữ Nhật CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Thang Bằng CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình thang bằng CSS nhé!

HTML

 <h2>Hình Thang CSS</h2>
 <div class="hinh_thang"></div>

CSS

.hinh_thang{
   border-bottom: 50px solid #1E90FF;
   border-left: 25px solid transparent;
   border-right: 25px solid transparent;
   height: 0;
   width: 125px;
 }

Và đây là dự án vẽ hình thang trên Codepen nha:

See the Pen Hình Thang CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Bình Hành Bằng CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình bình hành bằng CSS nhé!

HTML

 <h2>Hình Bình Hành CSS</h2>
 <div class="hinh_binh_hanh"></div>

CSS

.hinh_binh_hanh{
   width: 150px;
   height: 100px;
   transform: skew(20deg);
   background: #1E90FF;
 }

Và đây là dự án vẽ hình bình hành trên Codepen nha:

See the Pen abZZWMV by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Tam Giác CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình tam giác bằng CSS nhé!

HTML

 <h2>Hình Tam Giác CSS</h2>
 <div class="hinh_tam_giac"></div>

CSS

.hinh_tam_giac {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid #1E90FF;
 }

Và đây là dự án vẽ hình tam giác trên Codepen nha:

See the Pen Hình Tam Giác CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Ngôi Sao CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình ngôi sao bằng CSS nhé!

HTML

 <h2>Hình Ngôi Sao CSS</h2>
 <div class="hinh_ngoi_sao"></div>

CSS

.hinh_ngoi_sao{
     width: 0;
     height: 0;
     margin: 50px 0;
     color: #1E90FF;
     position: relative;
     display: block;
     border-right: 100px solid transparent;
     border-bottom: 70px solid #1E90FF;
     border-left: 100px solid transparent;
     transform: rotate(35deg);
      }
.hinh_ngoi_sao:before {
     height: 0;
     width: 0;
     position: absolute;
     display: block;
     top: -45px;
     left: -65px;
     border-bottom: 80px solid #1E90FF;
     border-left: 30px solid transparent;
     border-right: 30px solid transparent;
     content: '';
     transform: rotate(-35deg);
 }
.hinh_ngoi_sao:after {
     content: '';
     width: 0;
     height: 0;
     position: absolute;
     display: block;
     top: 3px;
     left: -105px;
     color: #1E90FF;
     border-right: 100px solid transparent;
     border-bottom: 70px solid #1E90FF;
     border-left: 100px solid transparent;
     transform: rotate(-70deg);
 }

Và đây là dự án vẽ hình ngôi sao trên Codepen nha:

See the Pen Hình Ngôi Sao CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Trái Tim CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình trái tim bằng CSS nhé!

HTML

 <h2>Hình Trái Tim CSS</h2>
 <div class="hinh_trai_tim"></div>

CSS

.hinh_trai_tim {
     position: relative;
 }
.hinh_trai_tim:before,.hinh_trai_tim:after {
     content: "";
     width: 70px;
     height: 115px;
     position: absolute;
     background: #1E90FF;
     left: 70px;
     top: 0;
     border-radius: 50px 50px 0 0;
     transform: rotate(-45deg);
     transform-origin: 0 100%;
 }
.hinh_trai_tim:after {
     left: 0;
     transform: rotate(45deg);
     transform-origin: 100% 100%;
 }

Và đây là dự án vẽ hình trái tim trên Codepen nha:

See the Pen Hình Trái Tim CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Infinity Symbol(Biểu Tượng Vô Cực) CSS<

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng biểu tượng vô cực bằng CSS nhé!

HTML

 <h2>Biểu Tượng Vô Cực CSS</h2>
 <div class="bieu_tuong_vo_cuc"></div>

CSS

.bieu_tuong_vo_cuc{
   position: relative;
   width: 212px;
   height: 100px;
   box-sizing: content-box;
 }
 .bieu_tuong_vo_cuc:before,
 .bieu_tuong_vo_cuc:after {
   content: "";
   box-sizing: content-box;
   position: absolute;
   top: 0;
   left: 0;
   width: 60px;
   height: 60px;
   border: 20px solid #1E90FF;
   border-radius: 50px 50px 0 50px;
   transform: rotate(-45deg);
 }
 .bieu_tuong_vo_cuc:after {
   left: auto;
   right: 0;
   border-radius: 50px 50px 50px 0;
   transform: rotate(45deg);
 }

Và đây là dự án vẽ biểu tượng vô cực trên Codepen nha:

See the Pen WNxxObr by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình 5 Cạnh(Pentagon ) CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình 5 cạnh bằng CSS nhé!

HTML

 <h2>Hình 5 Cạnh CSS</h2>
 <div class="hinh_5_canh"></div>

CSS

.hinh_5_canh {
   position: relative;
   width: 54px;
   box-sizing: content-box;
   border-width: 50px 18px 0;
   border-style: solid;
   border-color: #1E90FF transparent;
 }
 .hinh_5_canh:before {
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   top: -85px;
   left: -18px;
   border-width: 0 45px 35px;
   border-style: solid;
   border-color: transparent transparent #1E90FF;
 }

Và đây là dự án vẽ hình 5 cạnh trên Codepen nha:

See the Pen Hình 5 Cạnh CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình 6 Cạnh(Hexagon) CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình 6 cạnh bằng CSS nhé!

HTML

 <h2>Hình 6 Cạnh CSS</h2>
 <div class="hinh_6_canh"></div>

CSS

.hinh_6_canh {
   width: 100px;
   height: 57.735px;
   background: #1E90FF;
   position: relative;
 }
 .hinh_6_canh::before {
   content: "";
   position: absolute;
   top: -28.8675px;
   left: 0;
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 28.8675px solid #1E90FF;
 }
 .hinh_6_canh::after {
   content: "";
   position: absolute;
   bottom: -28.8675px;
   left: 0;
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-top: 28.8675px solid #1E90FF;
 }

Và đây là dự án vẽ hình 6 cạnh trên Codepen nha:

See the Pen Hình 6 Cạnh CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình 8 Cạnh(Octagons) CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình 8 cạnh bằng CSS nhé!

HTML

 <h2>Hình 8 Cạnh CSS</h2>
 <div class="hinh_8_canh"></div>

CSS

.hinh_8_canh {
     width: 100px;
     height: 100px;
     background: #1E90FF;
     position: relative;
 }
.hinh_8_canh:before {
     content: "";
     width: 42px;
     height: 0;
     position: absolute;
     top: 0;
     left: 0;
     border-bottom: 29px solid #1E90FF;
     border-left: 29px solid #f4f4f4;
     border-right: 29px solid #f4f4f4;
 }
.hinh_8_canh:after {
     content: "";
     width: 42px;
     height: 0;
     position: absolute;
     bottom: 0;
     left: 0;
     border-top: 29px solid #1E90FF;
     border-left: 29px solid #f4f4f4;
     border-right: 29px solid #f4f4f4;
 }

Và đây là dự án vẽ hình 8 cạnh trên Codepen nha:

See the Pen Hình 8 Cạnh CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Quả Trứng CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình quả trứng bằng CSS nhé!

HTML

 <h2>Hình Quả Trứng CSS</h2>
 <div class="hinh_qua_trung"></div>

CSS

.hinh_qua_trung {
   display: block;
   width: 126px;
   height: 180px;
   background-color: #1E90FF;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
 }

Và đây là dự án vẽ hình quả trứng trên Codepen nha:

See the Pen Hình Quả Trứng CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Oval CSS

Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình oval bằng CSS nhé!

HTML

 <h2>Hình Oval CSS</h2>
 <div class="hinh_oval"></div>

CSS

.hinh_oval {
    width: 200px;
    height: 100px;
    background: #1E90FF;
    border-radius: 100px / 50px;
 }

Và đây là dự án vẽ hình quả trứng trên Codepen nha:

See the Pen Hình Oval CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xây Dựng Hình Dạnh Bằng Thuộc Tính shape-outside

shape-outside là một thuộc tính CSS giúp bạn có thể dễ dàng xây dựng hình dạng của một đối tượng bằng các hàm được cung cấp sẵn như là:

• circle()
• ellipse()
• inset()
• polygon()

Ngoài ra nó cũng cho phép xác định cách hiển thị nội dung theo hình dạng của đối tượng mà chúng ta muốn thiết lập(hình tròn, elip…). Để hiểu rõ hơn bạn và mình hãy đi vào từng ví dụ cụ thể nhé!

Hình Tròn Trong shape-outside

Bây giờ chúng ta sẽ đi vào tìm hiểu cách tạo hình tròn bằng shape-outside và thiết lập nội dung hiển thị xung quanh hình tròn thông qua đoạn mã dưới đây nhé!

HTML

<div class="circle"></div>
 <p>Nội Dung...</p>

CSS

.circle {
   margin: 12px;
   float: left;
   height: 150px;
   width: 150px;
   shape-outside: circle();
   clip-path: circle();
   background: linear-gradient(to right, #cac531, #f3f9a7);
 }

Và kết quả cuối cùng bạn xem bên dưới nhé:

See the Pen Xây Dựng Circle bằng shape-outside by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Hình Elip Trong shape-outside

Tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo hình elip bằng shape-outside và thiết lập nội dung hiển thị xung quanh hình elip thông qua đoạn mã dưới đây nhé!

HTML

<div class="elip"></div>
 <p>Nội Dung...</p>

CSS

elip {
   margin: 24px;
   float: left;
   shape-outside: ellipse();
   clip-path: ellipse();
   width: 100px;
   height: 200px;
   background: linear-gradient(to top right, #F17BB7, #AD84E3);
 }

Và kết quả cuối cùng bạn xem bên dưới nhé:

See the Pen Xây Dựng Elip bằng shape-outside by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Sử Dụng Thuộc Tính Inset Trong shape-outside

Trong phần này chúng ta sẽ đi vào sử dụng inset trong thuộc tính shape-outside CSS để xem hình dạng cũng như cách hiển thị của nó với nội dung trên trang web nhé!

HTML

<div class="inset"></div>
 <p>Nội Dung...</p>

CSS

.inset {
   margin: 24px;
   float: left;
   shape-outside: inset(15px round 45px);
   clip-path: inset(15px round 45px);
   width: 300px;
   height: 300px;
   background: linear-gradient(to right, #cac531, #f3f9a7);
 }

Và kết quả cuối cùng bạn xem bên dưới nhé:

See the Pen Xây Dựng inset bằng shape-outside by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Sử Dụng Thuộc Tính Polygon Trong shape-outside

Đây là một thuộc tính giúp bạn có thể vẽ ra được nhiều hình dạng phức tạp như hình tam giác, hình 5 cạnh, hình 6 cạnh… Và để hiểu rõ hơn bạn xem đoạn mã sau nhé:

HTML

<div class="inset"></div>
 <p>Nội Dung...</p>

CSS

.polygon {
   float: left;
   shape-outside: polygon(0 0, 0 300px, 200px 300px);
   clip-path: polygon(0 0, 0 300px, 200px 300px);
   height: 200px;
   width: 200px;
   background: linear-gradient(to right, #cac531, #f3f9a7);
 }

Và kết quả bạn xem Codepen bên dưới nhé:

See the Pen Xây Dựng polygon bằng shape-outside by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo CSS Shape hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Xem thêm bài viết thuộc chuyên mục: Kiến Thức Chung