Có cách nào để sử dụng chỉ xiên trong phần tử gốc không? Tôi cần phải tạo ra thứ gì đó giống như 'kim cương' làm mặt nạ và các yếu tố con không thể bị ảnh hưởng. Không có cách nào, trong trường hợp này, sử dụng png như một mặt nạ. Cảm ơn bạn trước!Làm thế nào để sử dụng xiên chỉ trong phần tử cha?
Bất kỳ thuộc tính transform nào ảnh hưởng đến yếu tố được áp dụng cho và tất cả các con của anh ấy.
Vì vậy, cách duy nhất để skew một phần tử "cha mẹ" duy nhất là không có con (ví dụ: nó cũng không thể là cha mẹ!).
Bạn có thể thử xây dựng một chút về những gì bạn muốn nhận được kết quả?
skew(), giống như tất cả các thuộc tính biến đổi luôn ảnh hưởng đến các phần tử con. Bạn có thể thử sử dụng hai khối HTML ở cùng một vị trí, một với các khối nghiêng() và một với các nội dung khác.
Ngoài ra, nếu bạn chỉ muốn một viên kim cương, một hộp hình chữ nhật có thang tỷ lệ() và xoay() là đủ, nhưng lại không có con.
Và nếu bạn muốn kim cương đó là mặt nạ , tôi chắc chắn sẽ dễ dàng hơn khi hiển thị các phần KHÔNG có trong hình kim cương. Hiển thị các phần bên ngoài của viên kim cương không phải là khó khăn, sau khi tất cả, chúng chỉ là hình tam giác hình chữ nhật.
Thực sự dễ dàng, bạn chỉ cần bỏ điều đó cho trẻ em. Unskew có nghĩa là áp dụng một biến đổi skew khác, nhưng ở góc đối diện lần này.
.parent { transform: skewX(45deg); }
.parent > * { transform: skew(-45deg); }
Nói chung, nếu bạn áp dụng một số biến đổi trên một yếu tố phụ huynh và bạn muốn các phần tử con trở lại bình thường, sau đó bạn phải áp dụng các biến đổi tương tự, chỉ trong thứ tự ngược lại (thứ tự thực hiện trong hầu hết các trường hợp!) và trừ đi các giá trị góc/độ dài được sử dụng để nghiêng, xoay hoặc dịch. Trong trường hợp tỷ lệ, bạn cần có hệ số tỷ lệ là 1/scale_factor_for_parent. Tức là, đối với quy mô, bạn sẽ làm điều gì đó như thế này:
.parent { transform: scale(4); }
.parent > * { transform: scale(.25); /* 1/4 = .25 */ }
Hình dạng kim cương với trẻ em khá dễ dàng.
quả:
HTML:
<div class='wrapper'>
<div class='diamond'>
<div class='child'>Yogi Bear</div>
<div class='child'>Boo Boo</div>
</div>
</div>
CSS:
012..wrapper {
overflow: hidden;
margin: 0 auto;
width: 10em; height: 10em;
}
.diamond {
box-sizing: border-box;
margin: 0 auto;
padding: 4em 1em 0;
width: 86.6%; height: 100%;
transform: translateY(-37.5%) rotate(30deg) skewY(30deg);
background: lightblue;
}
.child {
transform: skewY(-30deg) rotate(-30deg);
}
cách duy nhất để đạt được điều này là đưa phần tử con ra khỏi luồng tài liệu bằng cách sử dụng position:absolute; và đặt mức độ âm bằng nhau trên con.
Vấn đề với điều này là bây giờ bạn sẽ phải thay đổi kích thước cha mẹ của bạn theo cách thủ công.