একটি স্লেন্ট পক্ষের সাথে আকার দিন (প্রতিক্রিয়াশীল)


93

আমি নীচের চিত্রের মতো একটি আকৃতি তৈরি করার চেষ্টা করছি কেবলমাত্র একদিকে স্লেন্টেড এজ দিয়ে (উদাহরণস্বরূপ, নীচের দিকে) অন্য প্রান্তগুলি সোজা থাকে।

একটি স্লেন্ট দিক সহ সিএসএস ডিভ

আমি সীমান্ত পদ্ধতিটি ব্যবহার করার চেষ্টা করেছি (কোডটি নীচে দেওয়া হয়েছে) তবে আমার আকারের মাত্রা গতিশীল এবং তাই আমি এই পদ্ধতিটি ব্যবহার করতে পারি না।

.shape {
    position: relative;
    height: 100px;
    width: 200px;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 0px;
    bottom: -100px;
    border-width: 50px 100px;
    border-style: solid;
    border-color: tomato tomato transparent transparent;
}
<div class="shape">
    Some content
</div>


আমি ব্যাকগ্রাউন্ডের জন্য গ্রেডিয়েন্টগুলি ব্যবহার করার চেষ্টা করেছি (নীচের কোডের মতো) তবে মাত্রা পরিবর্তনের সাথে সাথে এটি গণ্ডগোল হয়ে যায়। নীচের স্নিপেটে আকারটি নিয়ে ঘোরাফেরা করে আমি কী বলতে চাইছি তা আপনি দেখতে পাচ্ছেন।

আমি কীভাবে এই আকারটি স্লিটেন্ট পাশ দিয়ে তৈরি করতে পারি এবং গতিশীল আকারগুলি সমর্থন করতে সক্ষম হতে পারি?

উত্তর:


128

কেবল একপাশে স্লেন্টেড এজ দিয়ে আকৃতিটি তৈরি করার অনেকগুলি উপায় রয়েছে।

নিম্নলিখিত পদ্ধতিগুলি প্রশ্নটিতে ইতিমধ্যে উল্লিখিত হিসাবে গতিশীল আকারগুলি সমর্থন করতে পারে না:

  • এর জন্য পিক্সেল মানগুলির সাথে সীমানা ত্রিভুজ পদ্ধতি border-width
  • কোণ সিনট্যাক্স সহ লিনিয়ার গ্রেডিয়েন্টস (যেমন 45deg, 30deg ইত্যাদি)।

গতিশীল আকারগুলি সমর্থন করতে পারে এমন পদ্ধতিগুলি নীচে বর্ণিত হয়েছে।


পদ্ধতি 1 - এসভিজি

( ব্রাউজার সামঞ্জস্য )

এসভিজিটি polygonএস বা pathএস ব্যবহার করে আকার তৈরি করতে ব্যবহার করা যেতে পারে । নীচে স্নিপেট ব্যবহার করে polygon। যে কোনও পাঠ্য সামগ্রী প্রয়োজনীয় আকারের উপরে অবস্থিত হতে পারে।

পেশাদাররা

  • এসভিজি স্কেলযোগ্য গ্রাফিক্স উত্পাদন করতে ডিজাইন করা হয়েছে এবং সমস্ত মাত্রা পরিবর্তনের সাথে ভালভাবে কাজ করতে পারে।
  • সর্বনিম্ন কোডিং ওভারহেড দিয়ে সীমানা এবং হোভার ইফেক্ট অর্জন করা যায়।
  • চিত্র বা গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডও আকৃতিটিতে সরবরাহ করা যেতে পারে।

কনস

  • ব্রাউজার সমর্থন সম্ভবত একমাত্র নেহাত কারণ IE8- এসভিজি সমর্থন করে না তবে এটি রাফেল এবং ভিএমএলের মতো লাইব্রেরি ব্যবহার করে প্রশমিত করা যেতে পারে। তদুপরি, ব্রাউজার সমর্থন অন্য বিকল্পগুলির চেয়ে কোনওভাবেই খারাপ নয়।

পদ্ধতি 2 - গ্রেডিয়েন্ট পটভূমি

( ব্রাউজার সামঞ্জস্য )

লিনিয়ার গ্রেডিয়েন্টগুলি এখনও আকার তৈরি করতে ব্যবহার করা যেতে পারে তবে প্রশ্নের সাথে উল্লিখিত কোণগুলির সাথে নয়। আমাদের কোণ নির্দিষ্ট করার পরিবর্তে to [side] [side]বাক্য গঠন ( ভ্যালসকে ধন্যবাদ ) ব্যবহার করতে হবে। পক্ষগুলি নির্দিষ্ট করা হলে গ্রেডিয়েন্ট কোণগুলি ধারকগুলির মাত্রার উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে সামঞ্জস্য হয়।

পেশাদাররা

  • ধারকটির মাত্রা গতিশীল হলেও আকারটি অর্জন ও বজায় রাখা যায়।
  • গ্রেডিয়েন্ট রঙ পরিবর্তন করে হোভার এফেক্ট যুক্ত করা যেতে পারে।

কনস

  • হোভার ইফেক্টটি ট্রিগার করা হবে এমনকি কার্সার আকারের বাইরে থাকলেও ধারকটির মধ্যে থাকে।
  • সীমানা যুক্ত করার জন্য জটিল গ্রেডিয়েন্ট ম্যানিপুলেশনগুলির প্রয়োজন হবে।
  • প্রস্থ (বা উচ্চতা) খুব বড় হয়ে গেলে গ্রেডিয়েন্টগুলি জেগড কোণগুলি উত্পাদন করার জন্য পরিচিত।
  • চিত্রের ব্যাকগ্রাউন্ড আকারে ব্যবহার করা যাবে না।

পদ্ধতি 3 - স্কিউ রূপান্তর

( ব্রাউজার সামঞ্জস্য )

এই পদ্ধতিতে, একটি ছদ্ম-উপাদান যুক্ত করা হয়, স্কিউ করা হয় এবং এমনভাবে অবস্থিত করা হয় যেন দেখে মনে হয় যে কোনও প্রান্তটি স্লেন্টেড / কোণযুক্ত। ঘূর্ণন এক্স অক্ষ বরাবর হওয়া উচিত। transform-originতখন হেলে যাওয়া পাশ থেকে পাশ বিপরীত থাকা উচিত।

পেশাদাররা

  • সীমানা দিয়েও আকৃতি অর্জন করা যায়।
  • হোভার ইফেক্টটি আকারের মধ্যে সীমাবদ্ধ থাকবে।

কনস

  • মাত্রা কারণ একটি উপাদান স্কিউ যখন আকৃতি জন্য আনুপাতিকভাবে বৃদ্ধি বজায় রাখতে প্রয়োজন তার যেমন Y- অক্ষ বৃদ্ধি পায় অফসেট widthবেড়ে যায় এবং ভাইস বিপরীতভাবে (বৃদ্ধি চেষ্টা widthকরার 200pxস্নিপেট মধ্যে)। আপনি এই সম্পর্কে আরও তথ্য পেতে পারেন এখানে

পদ্ধতি 4 - দৃষ্টিভঙ্গি রূপান্তর

( ব্রাউজার সামঞ্জস্য )

এই পদ্ধতিতে, প্রধান ধারকটি X বা Y অক্ষের সাথে কিছুটা দৃষ্টিকোণ দিয়ে ঘোরানো হয়। উপযুক্ত মানটি সেট transform-originকরা কেবলমাত্র একদিকে স্লেটেড প্রান্ত তৈরি করবে।

যদি শীর্ষ বা নীচের দিকটি স্লিটেন্ট থাকে তবে আবর্তনটি Y অক্ষের সাথে হওয়া উচিত, অন্যথায় আবর্তনটি X অক্ষের সাথে হওয়া উচিত। transform-originতখন হেলে যাওয়া পাশ থেকে পাশ বিপরীত থাকা উচিত।

পেশাদাররা

  • সীমানা দিয়ে আকৃতি অর্জন করা যায়।
  • আকার বজায় রাখার জন্য আকারগুলি আনুপাতিকভাবে বাড়ানো দরকার না।

কনস

  • সামগ্রীগুলিও ঘোরানো হবে এবং সেহেতু সাধারণ দেখতে তাদের পাল্টাতে হবে।
  • অবস্থানগুলি স্থিতিশীল না হলে পাঠ্য অবস্থানের অবস্থানটি ক্লান্তিকর হবে।

পদ্ধতি 5 - সিএসএস ক্লিপ পাথ

( ব্রাউজার সামঞ্জস্য )

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

পেশাদাররা

  • ধারকটিকে পরিবর্তনশীলভাবে পুনরায় আকার দেওয়া হলেও আকারটি বজায় রাখা যায়।
  • হোভার ইফেক্টটি আকারের সীমানার মধ্যে পুরোপুরি সীমাবদ্ধ থাকবে।
  • চিত্রটি আকারের পটভূমি হিসাবেও ব্যবহার করা যেতে পারে।

কনস

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

পদ্ধতি 6 - ক্যানভাস

(ব্রাউজার সামঞ্জস্য )

ক্যানভাসগুলি পথ আঁকিয়ে আকৃতি তৈরি করতে ব্যবহার করা যেতে পারে। নীচে স্নিপেট একটি ডেমো আছে। যে কোনও পাঠ্য সামগ্রী প্রয়োজনীয় আকারের উপরে অবস্থিত হতে পারে।

পেশাদাররা

  • ধারকটির মাত্রা গতিশীল হলেও আকারটি অর্জন ও বজায় রাখা যায়। সীমানা যুক্ত করা যেতে পারে।
  • হোভার ইফেক্টটি ব্যবহার করে আকারের সীমানার মধ্যে সীমাবদ্ধ করা যেতে পারে pointInpathপদ্ধতি ।
  • চিত্র বা গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডও আকৃতিটিতে সরবরাহ করা যেতে পারে।
  • যদি রিয়েল-টাইম অ্যানিমেশন প্রভাবগুলির প্রয়োজন হয় কারণ এটি ডিওএম ম্যানিপুলেশনের প্রয়োজন হয় না তবে ভাল পছন্দ।

কনস

  • ক্যানভাস রাস্টার ভিত্তি করে এবং অত: পর কৌণিক প্রান্ত pixelated হয়ে যাবে অথবা যখন একটি বিন্দু পরলোক ছোটো ঝাপসা *

* - যখনই ভিউপোর্টকে পুনরায় আকার দেওয়া হয় তখন পিক্সিলেশন এড়ানোর জন্য আকারটির পুনরায় রঙ প্রয়োজন। এটা একটি উদাহরণ এখানে কিন্তু যে একটি ওভারহেড হয়।


36

আমি সীমানা পদ্ধতিটি ব্যবহার করার চেষ্টা করেছি তবে আমার আকারের মাত্রা গতিশীল এবং তাই আমি এই পদ্ধতিটি ব্যবহার করতে পারি না।


পদ্ধতি 7 - ভিউপোর্ট ইউনিট (সীমান্ত Redux )

( ব্রাউজার সামঞ্জস্য )

ভিউপোর্ট ইউনিটগুলি CSS3 এ একটি দুর্দান্ত উদ্ভাবন। আপনি সাধারণত শতকরা মান ব্যবহার করতে পারেন যদিও আপনার বৈশিষ্ট্য dynamize জন্য, আপনাকে এটির জন্য ব্যবহার করতে পারবেন না border-widthগুলি ( কিংবা জন্য font-sizeগুলি )।

পরিবর্তে ভিউপোর্ট ইউনিটগুলির সাথে আপনি ভিউপোর্টের মাত্রাটির সাথে তুলনা করে আপনার বস্তুর মাপের সাথে আপনার সীমানা প্রস্থকে গতিশীলভাবে সেট করতে পারেন

দ্রষ্টব্য: শতাংশের মানগুলি ভিউপোর্টে (উইন্ডোর দৃশ্যমান অঞ্চল) নয়, প্যারেন্ট অবজেক্টকে উল্লেখ করা হয়।

পদ্ধতিটি পরীক্ষা করার জন্য, নিম্নলিখিত স্নিপেট পূর্ণ পৃষ্ঠাটি চালু করুন এবং এটি অনুভূমিক এবং উল্লম্বভাবে আকার দিন ize

.shape {
    position: relative;
    height: 20vh;
    width: 40vw;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    left: 0px;
    right: 0px;
    top: 20vh;
    border-width: 10vh 20vw;
    border-style: solid;
    border-color: tomato tomato rgba(0,0,0,0) rgba(0,0,0,0);
}
<div class="shape">Some content</div>

পেশাদাররা - (1) সবকিছু গতিশীল, ব্রাউজারের কভারেজ প্রশস্ত।

কনস - (1) আপনি মনোযোগ দিতে হবে কিভাবে আপনার অপারেটিং সিস্টেম স্ক্রলবার পরিচালনা সঙ্গে overflow: auto;


4
এটি ক্রোমের সর্বশেষতম সংস্করণে জাজড বলে মনে হচ্ছে।
মিঃগ্রিন

সত্য! আমার ধারণা ব্রাউজার ইঞ্জিনগুলিকে এটিকে সহজেই রেন্ডার করতে এখনও কিছু সময় প্রয়োজন। ভিউপোর্ট ইউনিটগুলির পরিবর্তে পিক্সেল দিয়ে এই কৌশলটি ব্যবহার করার সময় ফায়ারফক্সেরও এই সমস্যা রয়েছে তবে এটি স্বচ্ছের পরিবর্তে rgba (,,, 0) ব্যবহার করে স্থিরযোগ্য। ভাগ্যক্রমে আমাদের কাছে এখনই অন্যান্য বিকল্প রয়েছে;)
অ্যান্ড্রিয়া লিগিয়াস

1

আমার সমাধানটি পদ্ধতি called - ভিউপোর্ট ইউনিট হিসাবে পরিচিত এক দ্বারা অনুপ্রাণিত এই পৃষ্ঠায় উপরের অ্যান্ড্রিয়া লিগিয়সের দ্বারা নির্মিত ভিউপোর্ট ।

height:10vwনেভিগেশন উইন্ডোটির প্রস্থকে পুনরায় আকার দেওয়ার সময় প্রদত্ত অনুপাতটিকে ট্র্যাপিজয়েডে রাখার জন্য আমি উচ্চতার জন্যও "অনুভূমিক" ইউনিট ব্যবহার করেছি । আমরা এই পদ্ধতিটি 7 বি কল করতে পারি - ভিউপোর্টের প্রস্থ

তদ্ব্যতীত, divএকজন এবং :afterনির্বাচক পরিবর্তে দুটি নেস্টেড এস ব্যবহার করে আমার মতে (যেমন text-align, ইত্যাদি) পাঠ্য সামগ্রীর স্টাইলগুলির আরও ভাল সুরের মঞ্জুরি দেয় ।

.dtrapz {
  position: relative;
  margin: 10px 40vw;
  width: 0;
  height: 10vw;
  border: none;
  border-right: 20vw solid #f22;
  border-bottom: 5vw solid transparent;
}

.dtcont {
  position: absolute;
  width: 20vw;
  height: 10vw;
  text-align: center;
  color: #fff;/* just aesthetic */
}
<div class="dtrapz">
  <div class="dtcont">Some content</div>
</div>


@ ডাউনভোটার হাই! আমার উত্তরে যা ভুল তা আমাকে জানতে দিন, তাই এটি যদি বোঝা যায় তবে আমি এটি সম্পাদনা করতে বা মুছতে পারি! আমি বিশেষজ্ঞ নই তবে আমার কাছে মনে হয় এটি অনেক পৃষ্ঠায় প্রয়োগ করা যেতে পারে, কেবল প্রস্থের উপর নির্ভর করে দীর্ঘতর পাঠ্য সামগ্রীর সাথে কাজ করতে হবে :)
ম্যাটআলেগ্রো
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.