এটি সম্পাদন করার আরেকটি উপায়, বিশেষত এমন কারও পক্ষে যার মতো আমার মতো সমতুল্য বা এমনকি স্কেলেন ত্রিভুজগুলির সাথে কাজ করা প্রয়োজন, filter: drop-shadow(...)একাধিক মান এবং কোনও অস্পষ্ট ব্যাসার্ধ ব্যবহার করা। এর একাধিক উপাদান বা অ্যাক্সেস উভয়ই না করার অতিরিক্ত সুবিধা রয়েছে : আগে এবং পরে (পরে আমি এটিটি সম্পাদন করার চেষ্টা করছিলাম: যে সামগ্রীটি ইনলাইন ছিল, তারপরেও পরম অবস্থানকে এড়াতে চেয়েছিল)।
উপরের ক্ষেত্রে, নিম্নলিখিত: সিএসএস এর মতো দেখতে পাওয়া যাবে ( ফ্রিডল ):
.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>
আমি মনে করি কিছু সীমাবদ্ধতা বা অদ্ভুততা রয়েছে, যদিও:
- আইই ১১ এ কোনও সমর্থন নেই (যদিও এফএফ, ক্রোম এবং এজ এ ঠিক আছে)
- আমি কেন নিশ্চিত না যে উপরের
<offset-y>দ্বিতীয় ড্রপ- শ্যাডোতে মানটির জন্য .ppx 1px এর চেয়ে 1px এর মতো আরও প্রদর্শিত হবে, যদিও আমি কল্পনা করি যে এটি ত্রিকোণমিতির সাথে সম্পর্কিত (যদিও কমপক্ষে আমার মনিটরে আমি এর মধ্যে কোনও পার্থক্য দেখি না) প্রকৃত ট্রিগ-ভিত্তিক মান বা .5px বা এমনকি এটির জন্য .1px)
- 1px এর চেয়েও বড় সীমানা (ভাল, সেইভাবে তাদের চেহারা) ভাল কাজ করছে বলে মনে হয় না। বা কমপক্ষে আমি সমাধানটি খুঁজে পেলাম না, যদিও আরও বড় হওয়ার জন্য নীচের চেয়ে কম-অনুকূলতম উপায়ের জন্য দেখুন। (আমি ভাবি যে
<spread-radius>ড্রপ-শ্যাডো এর ডকুমেন্টেড-তবে-অসমর্থিত ৪ র্থ প্যারামিটার ( ) হতে পারে যা আমি সত্যিই একাধিক ফিল্টার মানগুলির পরিবর্তে সন্ধান করছি, তবে এটি সম্পূর্ণরূপে ভাঙা জিনিসগুলিতে যুক্ত করছি)) আপনি এখানে দেখতে পারেন 1px ( ফিজল ) এর বাইরে যাওয়ার সময় ঘটতে শুরু করে :
.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>
লক্ষ্য করুন যে প্রথমটি (সবুজ) একবার প্রয়োগ করা হয়েছে তবে দ্বিতীয়টি (লাল) সীমান্ত দিয়ে তৈরি হলুদ ত্রিভুজ পাশাপাশি সবুজ ড্রপ-শেডো () এবং শেষটি (নীল) উভয়ই প্রয়োগ করা হচ্ছে উপরের সমস্ত প্রয়োগ করা হয়। (সম্ভবত এটি .5px উপস্থিত জিনিসের সাথেও সম্পর্কিত)।
তবে আমি অনুমান করি যে আপনি যদি 1px এর চেয়ে আরও বিস্তৃত কিছু দেখতে চান তবে এগুলিকে নীচের মতো ( ফ্রেডল ) এর মতো পরিবর্তন করে আপনি একে অপরের উপরের ড্রপ-ছায়াগুলি বিল্ডিংয়ের সুবিধা নিতে পারবেন :
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);
যেখানে প্রথমটির মধ্যে একটি অস্পষ্ট-ব্যাসার্ধ সেট রয়েছে (এই ক্ষেত্রে 2.5px, যদিও ফলাফলটি বহুগুণ প্রদর্শিত হবে), এবং বাকী সমস্তগুলিতে 0 এ অস্পষ্টতা রয়েছে তবে এটি কেবল সমস্ত পক্ষের একই রঙের জন্য কাজ করবে, এবং এর ফলাফল কিছু গোলাকৃতির চেহারার কোণগুলির পাশাপাশি বেশ রুক্ষ প্রান্তগুলিতে আপনি যত বড় যান।
