সিএসএসে সন্তানের পিতামাতার বাঁকানো সীমানা মানতে বাধ্য করা

Question

আমি অন্য ডিভ এর ভিতরে একটি ডিভ আছে। #outerএবং #inner। #outerবক্র সীমানা এবং একটি সাদা পটভূমি আছে। #innerকোন বাঁকা সীমানা এবং একটি সবুজ পটভূমি আছে। #innerএর বক্র সীমানা ছাড়িয়ে প্রসারিত #outer। এটি বন্ধ করার কোনও উপায় আছে কি?

#outer { 
        display: block; float: right; margin: 0; width: 200px;
        background-color: white; overflow: hidden;
        -moz-border-radius: 10px; 
        -khtml-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border-radius: 10px; 
    }
    #inner { background-color: #209400; height: 10px; border-top: none; }

 <div id="outer">
        <div id="inner"></div>
        <!-- other stuff needs a white background -->
        <!-- bottom corners needs a white background -->
    </div>


    

আমি এটি কীভাবে চেষ্টা করি তা এখনও ওভারল্যাপ হয়ে যায়। আমি কীভাবে #innerমান্য করতে পারি এবং #outerএর সীমানা পূরণ করতে পারি ?

সম্পাদন করা

নিম্নলিখিত হ্যাক এখন জন্য উদ্দেশ্য পরিবেশন। তবে প্রশ্নটি দাঁড়িয়েছে (সম্ভবত সিএসএস 3 এবং ওয়েব ব্রাউজার লেখকদের কাছে): শিশু উপাদানগুলি কেন তাদের পিতামাতার বাঁকানো সীমানা মানছে না এবং যেভাবে তাদের বাধ্য করতে বাধ্য হয়?

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

#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}

Comments

আপনি কি অভ্যন্তরীণ উপাদানের সাথে একই সীমানার ব্যাসার্ধটি সেট করার চেষ্টা করেছেন?

— ড্যানিয়েল ও'হারা

তবে আমি চাই অভ্যন্তরীণ উপাদানের সীমানা ব্যাসার্ধটি নীচে সরাসরি হওয়া উচিত। একটি নির্দিষ্ট কোণার জন্য কি সীমানা ব্যাসার্ধ সেট করা সম্ভব?

— ড্যানিয়েল

অবশ্যই। এমনকি আপনি তাদের পছন্দ মত নির্ধারণ করতে পারেন border-radius: TL TR BL BR।

— ড্যানিয়েল ও'হারা

আমি এটি "সন্তানের পিতামাতার আদেশ মানতে বাধ্য করা" হিসাবে পড়েছি। :)

— বেনর ম্যাকার্থি

সাফারি ব্যতীত, -moz-border-radiusএবং border-radiusচার মান একটি সাঁটে লেখার হিসাবে ব্যবহার করা যেতে পারে: 10px 10px 0 0। সাফারির জন্য তবে আপনাকে সেগুলি পৃথকভাবে সেট করা দরকার।

— ই জিয়াং

Answer 1

চশমা অনুযায়ী:

একটি বাক্সের ব্যাকগ্রাউন্ড, তবে এর সীমানা-চিত্রটি যথাযথ বক্ররেখাতে ক্লিপ করা হয় ('ব্যাকগ্রাউন্ড-ক্লিপ' দ্বারা নির্ধারিত হিসাবে)। সীমানা বা প্যাডিং প্রান্তে ক্লিপ করা অন্যান্য প্রভাবগুলি (যেমন 'দৃশ্যমান' ব্যতীত 'ওভারফ্লো') বক্ররেখাতে অবশ্যই ক্লিপ করতে হবে। প্রতিস্থাপিত উপাদানগুলির সামগ্রী সর্বদা সামগ্রী প্রান্ত বক্ররেখা ছাঁটা হয়। এছাড়াও, সীমানার প্রান্তের বক্ররেখার বাইরের অঞ্চল উপাদানটির পক্ষে মাউস ইভেন্টগুলি গ্রহণ করে না।

http://www.w3.org/TR/css3-background/#the-border-radius

এর অর্থ হল একটি overflow: hiddenঅন #outerকাজ করা উচিত। যাইহোক, এটি ফায়ারফক্স 3.6 এবং এর জন্য কাজ করবে না। এটি ফায়ারফক্স 4 এ স্থির করা হয়েছে:

গোলাকার কোণে এখন সামগ্রী এবং চিত্রগুলি ক্লিপ করুন (যদি ওভারফ্লো: দৃশ্যমান সেট না করা থাকে)।

https://developer.mozilla.org/en/CSS/-moz-border-radius

সুতরাং আপনার এখনও ঠিক করতে হবে, এটি এটিকে ছোট করুন:

#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}

এটি এখানে কাজ করে দেখুন: http://jsfiddle.net/VATAZ/3/

Comments

বিঙ্গো, আমি ফায়ারফক্স 3.6 দিয়ে পরীক্ষা করছিলাম। সুতরাং এটি এটি ব্যাখ্যা করে।

— ড্যানিয়েল বিংহাম

খেলায় এই দেরিতে যে কেউ আসছেন overflow: hidden;, এফএফের বর্তমান সংস্করণগুলিতে কাজ করছেন। আপনার প্রয়োজনীয়তা যতটা সম্ভব পরীক্ষা করে দেখুন।

— বিলিনার

কেবল খেয়াল করতে চাই যে এই overflow hidden

— ফ্রিডলটির

আমরা যদি ওভারফ্লো বিষয়বস্তুটি গোপন না রাখতে চাই? একটি লুকানো ওভারফ্লো ভিতরে থাকা সরঞ্জামদ্বার পপআপ এবং উইন্ডো মেনুগুলির মতো জিনিসগুলি কেটে ফেলবে।

— মে

শুধু উপচে পড়া: লুকানো; এবং সীমানার ব্যাসার্ধটি বাইরের ডিআইভি

— নাদেরের

Answer 2

এতে কী ভুল হবে?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}

Comments

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

— ড্যানিয়েল

হুম ... দেখা যাচ্ছে আপনি পৃথক কোণ সেট করতে পারেন। সুতরাং আমি ঠিক শীর্ষ দুটি সেট।

— ড্যানিয়েল

Answer 3

আপনি যদি নীচে তীক্ষ্ণ প্রান্তগুলি চান: এগুলি ব্যবহার করুন:

সীমানা-উপরে-বাম-ব্যাসার্ধ: 10px;
সীমানা-উপরে-ডান-ব্যাসার্ধ: 10px; 

-moz-সীমান্তে ব্যাসার্ধ-topleft
-moz-সীমান্তে ব্যাসার্ধ-topright

Answer 4

আপনি কি অবস্থান তৈরির চেষ্টা করেছেন: অভ্যন্তরীণ ডিভের জন্য আপেক্ষিক ???

এটাই:

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}