Một cách khác để thực hiện điều này, đặc biệt đối với những người cần điều này để làm việc với các tam giác đều hoặc thậm chí là vô hướng như tôi đã làm, là sử dụng filter: drop-shadow(...)với nhiều giá trị và không có bán kính mờ. Điều này có lợi ích bổ sung là không cần nhiều phần tử hoặc truy cập vào cả hai : before và: after (Tôi đang cố gắng thực hiện điều này với: after nội dung nằm trong dòng, vì vậy tôi cũng muốn tránh vị trí tuyệt đối).
Đối với trường hợp trên, CSS: after's có thể trông như thế này ( fiddle ):
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
border-color: transparent transparent transparent #fff;
filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
Test Container
</div>
Tôi nghĩ rằng có một số hạn chế hoặc weirdness, mặc dù:
- Không hỗ trợ IE11 (mặc dù có vẻ ổn trong FF, Chrome và Edge)
- Tôi không chắc tại sao .5px cho
<offset-y>giá trị trong bóng đổ thứ hai () ở trên xuất hiện giống 1px hơn 1px, mặc dù tôi tưởng tượng nó liên quan đến lượng giác (mặc dù ít nhất trên màn hình của tôi, tôi không thấy sự khác biệt nào giữa giá trị thực tế dựa trên trig hoặc .5px hoặc thậm chí .1px cho vấn đề đó).
- Các đường viền lớn hơn 1px (tốt, giao diện của chúng theo cách đó) dường như không hoạt động tốt. Hoặc ít nhất là tôi chưa tìm ra giải pháp, mặc dù hãy xem bên dưới để biết một cách ít tối ưu hơn để phát triển lớn hơn một chút. (Tôi nghĩ rằng thông số thứ 4 (
<spread-radius>) được ghi lại bằng tài liệu nhưng không được hỗ trợ của drop-shadow () có thể là thứ tôi thực sự đang tìm kiếm thay vì nhiều giá trị bộ lọc, nhưng việc thêm nó vào chỉ phá vỡ mọi thứ hoàn toàn.) Ở đây bạn có thể thấy những gì bắt đầu xảy ra khi vượt ra ngoài 1px ( fiddle ):
.container {
background-color: #eee;
padding: 1em;
}
.container:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20.4px 10px 0 10px;
border-color: yellow transparent transparent transparent;
margin-left: .25em;
display: inline-block;
filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
Test Container
</div>
Lưu ý sự hài hước mà hình đầu tiên (xanh lá cây) được áp dụng một lần, nhưng hình thứ hai (màu đỏ) được áp dụng cho cả hình tam giác màu vàng được tạo qua đường viền cũng như bóng đổ màu xanh lá cây () và hình cuối cùng (màu xanh lam) được áp dụng cho tất cả những điều trên. (Có lẽ điều đó cũng liên quan đến thứ xuất hiện .5px).
Nhưng tôi đoán bạn có thể tận dụng lợi thế của những bóng đổ này xây dựng lên nhau nếu bạn cần thứ gì đó trông rộng hơn 1px, bằng cách thay đổi chúng thành một cái gì đó như sau ( fiddle ):
filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);
trong đó cái đầu tiên có bán kính mờ (2,5px trong trường hợp này, mặc dù kết quả xuất hiện nhân) và tất cả phần còn lại có độ mờ bằng 0. Nhưng điều này sẽ chỉ hoạt động với cùng một màu ở tất cả các bên và kết quả là ở một số góc trông tròn cũng như các cạnh khá thô khi bạn càng lớn.
