Hãy tiếp tục và tạo một số hình dạng CSS vui nhộn! Theo dõi Codepen của tôi để biết tất cả mã. Hãy làm điều này.
Hình chữ nhật và Hình vuông
Tất cả các hình dạng của chúng ta sẽ được bao bọc trong một div. Hình dạng cơ bản nhất là hình vuông và hình chữ nhật vì theo mặc định div là hình vuông hoặc hình chữ nhật tùy thuộc vào thuộc tính chiều rộng và chiều cao. Vì vậy, hình vuông có chiều rộng và chiều cao bằng nhau trong khi hình chữ nhật thì không:
.rectangle {
width: 2rem;
height: 4rem;
background-color: violet;
}
.square {
width: 5rem;
height: 5rem;
background-color: lime;
}
Lời nhắc :Chúng tôi sử dụng rem dựa trên kích thước phông chữ gốc và cho phép mở rộng quy mô dễ dàng. Đây là mặc định trên trình duyệt (thường là 16px). Chúng tôi đặt kích thước phông chữ của mình thành 20px, vì vậy 2rem là 40px.
Vòng kết nối
Chúng tôi sẽ tiếp tục và tạo một vòng kết nối cho hình ảnh hồ sơ. Để tạo một hình tròn tương tự như hình vuông nhưng chúng ta cần chỉ định bán kính đường viền. Để làm tròn các góc, nó sẽ phải ở mức 50%. Nếu chúng ta muốn có hình bầu dục, chúng ta sẽ sửa đổi chiều rộng / chiều cao trong một đường tương tự như hình chữ nhật.
Hãy tạo hình ảnh hồ sơ của chúng tôi:
.profile-image {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url("https://user-images.githubusercontent.com/15071636/91342237-57ad9a00-e7a0-11ea-97bc-606a5998b29a.jpg");
background-position: center center;
background-size: cover;
}
Lưu ý :Thuộc tính nền là lấy hình ảnh, kích thước và căn giữa.
Hình bình hành
Chúng ta cũng có thể làm một hình bình hành. Hình dạng này có thể hữu ích khi thêm hiệu ứng văn bản thú vị. Ở đây, chúng tôi sẽ sử dụng thuộc tính biến đổi và chúng tôi sẽ sử dụng giá trị xiên để biến đổi hình dạng (và bất kỳ thứ gì bên trong) thành một hình bình hành có 20 hoặc -20 độ.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
.parallelogram {
color: ivory;
width: 6rem;
height: 1.5rem;
transform: skew(-20deg);
background: indianred;
}
Trông bắt mắt phải không &# 128526;
Hình dạng khác
Bây giờ chúng ta đã có một số kiến thức về các hình dạng CSS và cách sử dụng của nó, chúng ta có thể xem các hình dạng khác. Tất cả chúng, bạn có thể chơi cho chính mình trên Codepen của tôi.
.triangle {
width: 0;
height: 0;
border-left: 2rem solid transparent;
border-right: 2rem solid transparent;
border-bottom: 5rem solid hotpink;
}
Mặc dù có nhiều cách để thực hiện một trái tim và bạn có thể tìm thấy nhiều cách lặp lại trên mạng, nhưng cách này khá đơn giản.
.heart {
width: 10rem;
background: radial-gradient(circle at 60% 65%, goldenrod 64%, transparent 65%)
top left, radial-gradient(
circle at 40% 65%,
goldenrod 64%,
transparent 65%
) top right,
linear-gradient(to bottom left, goldenrod 43%, transparent 43%) bottom left,
linear-gradient(to bottom right, goldenrod 43%, transparent 43%) bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.heart::before {
content: "";
display: block;
padding-top: 100%;
}
Tiếp tục và chơi với tỷ lệ phần trăm và thay đổi màu sắc. Bạn có thể thấy trái tim đang được xây dựng như thế nào. Vì vậy, chúng ta có thể xem với ::before và also ::after pseudo-element, chúng ta có thể tạo ra một số hình dạng thú vị như thế nào.
Ngoài ra, với polygon() chức năng, chúng tôi có thể chỉ định các hình dạng khác, mở rộng giới hạn của chúng tôi.
.letter-t {
width: 5rem;
height: 5rem;
margin: 0 1rem;
shape-outside: polygon(
0 0,
100% 0,
100% 20%,
60% 20%,
60% 100%,
40% 100%,
40% 20%,
0 20%
);
clip-path: polygon(
0 0,
100% 0,
100% 20%,
60% 20%,
60% 100%,
40% 80%,
40% 20%,
10% 20%
);
background: navajowhite;
}
Kiểm tra trình tạo đường dẫn clip này , một công cụ thú vị sẽ tạo cho bạn mã cho một loạt các hình dạng!