Tôi đang tạo một mẫu ba góc cách điệu nhỏ "trước" phần tử h1 của mình, nhưng tôi không thể hiểu đúng hình tròn góc. Góc trên bên phải vẫn ổn, nhưng hai góc còn lại có vấn đề về cắt.
Đây là kết quả đầu ra và hình ảnh phóng to của hình dạng:
Mã được sử dụng như sau:
h1:trước {
nội dung: "";
hiển thị: khối nội tuyến;
chiều rộng: 0,7em;
chiều cao: 0,7em;
lề phải: 10px;
đường dẫn clip: đa giác (100% 0%, 100% 100%, 0% 0%);
-webkit-clip-path: đa giác (100% 0%, 100% 100%, 0% 0%);
màu nền: #34495e;
bán kính đường viền: 0,12em;
}
Tiêu đề
Tôi muốn tất cả các Góc đều mịn và tròn, không có bất kỳ Góc nhọn nào. Có lẽ có một cách tốt hơn để làm điều này. Bất kỳ lời khuyên nào khác để cải thiện điều này cũng đều được chào đón.
Đây là một ý tưởng, bạn có thể ước chừng nó bằng cách dựa vào 2 phần tử giả và một số màu nền. Bạn chỉ cần tìm giá trị phù hợp để đạt được sự chồng chéo hoàn hảo giữa hai phần tử giả.
h1 {
đệm-trái:1em;
vị trí: tương đối;
}
h1:trước {
nội dung: "";
vị trí: tuyệt đối;
left: 0;
trên cùng: calc(50% - 0,35em);
chiều rộng: 0,7em;
chiều cao: 0,7em;
nền: gradient tuyến tính (ở dưới cùng bên trái, #34495e 50%, trong suốt 50%);
bán kính đường viền: 0,1em;
}
h1:sau {
nội dung: "";
position: absolute;
trái: 3,8px;
trên cùng: -0,1px;
chiều rộng: 0,92em;
chiều cao: 0,8em;
lề phải: 10px;
nền: gradient tuyến tính (lên trên cùng, #34495e 3.5px, trong suốt 5px);
bán kính đường viền: 0,1em;
biến đổi: xoay (45deg);
z-index: -1;
}
Tiêu đề
Tôi là một lập trình viên xuất sắc, rất giỏi!