খাঁটি সিএসএস (কোনও ছবি নেই) দিয়ে আমি কীভাবে এই অনিয়মিত আকারের সীমানা তৈরি করতে পারি?

Question

আমি কার্যকরভাবে এটি তৈরি করতে পটভূমি চিত্র (বা কোনও চিত্র-ভিত্তিক সমাধান) ব্যবহার এড়াতে চেষ্টা করছি:

দ্রষ্টব্য: লাল তীরটি কেবল প্রশ্নে সীমান্তে নির্দেশ করছে। তীরটি আপনার উত্তরের অন্তর্ভুক্ত করা উচিত নয়।

খাঁটি সিএসএস (কোনও ছবি নেই) দিয়ে আমি কীভাবে এই অনিয়মিত আকারের সীমানা তৈরি করতে পারি? চিত্রগুলি যদি অপরিবর্তনীয় না হয় তবে সর্বাধিক সংক্ষিপ্ত এবং পঠনযোগ্য উত্তরটি আপভোট এবং গ্রহণযোগ্য হবে।

Answer 1

আপনি সিএসএস ব্যবহার করতে পারেন (এটি IE এর পুরানো সংস্করণগুলির সাথে কাজ করবে না)।

উদাহরণস্বরূপ, আপনি আয়তক্ষেত্র এবং দুটি ত্রিভুজগুলির মতো কিছু আকার একত্রিত করতে পারেন। এই jsfiddle দেখুন ।

এইচটিএমএল:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

এবং সিএসএস:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

আপনি এখানে বিভিন্ন ধরণের সিএসএস আকার দেখতে পারেন । বেশিরভাগ ক্ষেত্রে যদি একের বেশি ডিভিডের প্রয়োজন না হয়, তাই চ্যালেঞ্জটি একটি গা a় সীমানা প্রয়োগ করা হবে।

Comments

বহুভুজ শতাংশ-ভিত্তিক প্রস্থ ব্যবহার করে এমনটি করার কোনও উপায় কি আছে?

— মাইকা বোলেন

ইয়িসেলার পদ্ধতির সাহায্যে আপনি একটি ডিভ দিয়ে ত্রিভুজটি তৈরি করতে পারেন (বর্গাকার প্রস্থের সাথে 1/2 বর্গক্ষেত্র এবং বর্ডার ডান; সীমানা শীর্ষ = পছন্দসই উচ্চতা; এবং একটি মার্জিন-শীর্ষ যুক্ত করতে পারেন (-1 * সীমানা শীর্ষ) ।

— পাঠ্যটিকে

আপনি এই অতিরিক্ত আকারগুলি সিউডো-উপাদানগুলিতে :beforeএবং :afterআপনার html'পরিষ্কার' রাখতে পারেন । :beforeবাম ত্রিভুজ, হবে :afterসঠিক।

— ভিনসেন্ট

Answer 2

ইয়েসেলার উত্তরটি শক্ত, তবে আমি অনুভব করেছি যে আমি এই বিকল্পটি উপস্থাপন করব: বহুভুজ বা সিএসএস আকার এবং ক্লিপ-পাথের সাথে একটি চিত্র ইউআরআই ব্যবহার করে। এখানে একটি দ্রুত টিউটোরিয়াল ।

নোট করুন যে এই পদ্ধতিটি এই মুহুর্তে ত্রিভুজ সীমান্ত ট্রিকের চেয়ে কম ব্রাউজারের সাথে কাজ করবে। তবে, আপনি যদি আরও জটিল আকার ব্যবহার করতে চান বা আপনার পাঠ্যটিকে আকারে আবদ্ধ করতে চান তবে এটি যাওয়ার উপায়।

Comments

শতভাগ-ভিত্তিক প্রস্থ ব্যবহার করার জন্য বহুভুজটির দরকার পড়লে এই সমাধানটি কাজ করবে বলে মনে হয়। সম্ভবত, সিএসএস vwইউনিটের মাধ্যমে। এই শব্দ কি সম্ভব?

— মাইকা বোলেন

Answer 3

এর জন্য আরও একটি পদ্ধতি যার সীমিত সমর্থন থাকতে পারে এটি হ'ল "সিএসএসে এমবেডড এসভিজি"। আমি এটি নিজে চেষ্টা করে দেখিনি তবে ধারণাটি হ'ল আপনি বস্তুর সিএসএস ঘোষণার মধ্যে ইউআরএল হিসাবে একটি চিত্র সংস্থান সরবরাহ করেন এবং আপনি এটি সঠিকভাবে পলায়ন হওয়া ইউআরএল পাস করেন যাতে ডেটা থাকে।

এসভিজি হ'ল একটি সরল পাঠ / এক্সএমএল ফর্ম্যাট। একটি বহুভুজ ( ডাব্লু 3 স্কুল থেকে ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg> 

একটি উদাহরণ ইনলাইন (এম্বেড করা) এসভিজি (সরলীকৃত) ( স্ট্যাকওভারফ্লো থেকে ):

url("data:image/svg+xml;utf8, <svg></svg>");

নোট করুন যে এসভিজি ডেটা অবশ্যই ইনলাইন ব্যবহারের জন্য সঠিকভাবে "পলায়ন" হওয়া উচিত, যা এটি কেবল এসভিজি ফাইলকে সংযুক্ত করার চেয়ে কিছুটা কম আকর্ষণীয় করে তোলে।

উপরের লিঙ্কযুক্ত থ্রেডে পদ্ধতির व्यवहार्यতা সম্পর্কিত কিছু আলোচনা রয়েছে। আমি মনে করি যে সাদা-ভরা ত্রিভুজ হিসাবে সাধারণ কিছু এম্বেড করা একটি সহজ সিদ্ধান্ত যেখানে সরবরাহের সমর্থন রয়েছে। কমপ্লেক্স এসভিজি ফর্ম্যাট ডেটা ইনলাইন না করে একটি এসভিজি ফাইল হিসাবে সংরক্ষণ করা উচিত।

এসভিজি ফাইলগুলি ভেক্টর এবং "সীমানা" পদ্ধতির বিপরীতে শতাংশ দ্বারা মাপা যায়। তালিকাভুক্ত ক্লিপিং পাথ পদ্ধতির চেয়ে তাদের (বর্তমানে) আরও ভাল (অন্তত ইন-লাইন নয়) সমর্থন রয়েছে। এসভিজি, সরল পাঠ্য, এমনকি পিএইচপি বা অন্যান্য সার্ভার-সাইড স্ক্রিপ্টিং ব্যবহার করে অন-ফ্লাইতে নির্গত হতে পারে।

Answer 4

চিত্রটিতে আপনার নীল অঞ্চলটি যদি স্বচ্ছ পিএনজি এবং সাদা অঞ্চল স্বচ্ছ হয়, তবে আপনাকে এটিকে এইচটিএমএল অন্তর্ভুক্ত করতে হবে এটি ছায়া ড্রপ করার জন্য:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

এবং এই সিএসএস ইমেজ ব্যবহার করুন:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

এটি পুরোপুরি ক্রস ব্রাউজার সমাধান।