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

Question 1

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

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

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

.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>

স্নিপেট প্রসারিত করুন

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

কোড স্নিপেট দেখান

.gradient {
  display: inline-block;
  vertical-align: top;
  height: 200px;
  width: 100px;
  margin: 10px;
  color: beige;
  transition: all 1s;
  padding: 10px;
  background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
}
.gradient:hover {
  width: 200px;
}

<div class="gradient"></div>

স্নিপেট প্রসারিত করুন

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

Question 2

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

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

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

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

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

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

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

কোড স্নিপেট দেখান

$(document).ready(function() {
  $('#increasew-vector').on('click', function() {
    $('.vector').css({
      'width': '150px',
      'height': '100px'
    });
  });
  $('#increaseh-vector').on('click', function() {
    $('.vector').css({
      'width': '100px',
      'height': '150px'
    });
  });
  $('#increaseb-vector').on('click', function() {
    $('.vector').css({
      'width': '150px',
      'height': '150px'
    });
  });
})

div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 20px;
  color: beige;
  transition: all 1s;
}
.vector {
  position: relative;
}
svg {
  position: absolute;
  margin: 10px;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}
polygon {
  fill: tomato;
}
.vector > span {
  position: absolute;
  display: block;
  padding: 10px;  
  z-index: 1;
}
.vector.top > span{
  height: 50%;
  width: 100%;
  top: calc(40% + 5px); /* size of the angled area + buffer */
  left: 5px;  
}
.vector.bottom > span{
  height: 50%;
  width: 100%;
  top: 5px;
  left: 5px;  
}
.vector.left > span{
  width: 50%;
  height: 100%;
  left: 50%; /* size of the angled area */
  top: 5px;  
}
.vector.right > span{
  width: 50%;
  height: 100%;
  left: 5px;
  top: 5px;  
}



/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}

polygon:hover, span:hover + svg > polygon{
  fill: steelblue;
}

.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}

button {
  width: 150px;
  margin-bottom: 10px;
}

.vector.left{
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vector bottom">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,0 40,0 40,100 0,60" />
  </svg>
</div>
<div class="vector top">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,40 40,0 40,100 0,100" />
  </svg>
</div>
<div class="vector left">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,0 40,0 40,100 20,100" />
  </svg>
</div>
<div class="vector right">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,0 20,0 40,100 0,100" />
  </svg>
</div>

<div class='btn-container'>
  <button id="increasew-vector">Increase Width</button>
  <button id="increaseh-vector">Increase Height</button>
  <button id="increaseb-vector">Increase Both</button>
</div>

স্নিপেট প্রসারিত করুন

পেশাদাররা

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

কনস

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

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

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

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

কোড স্নিপেট দেখান

$(document).ready(function() {
  $('#increasew-gradient').on('click', function() {
    $('.gradient').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-gradient').on('click', function() {
    $('.gradient').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-gradient').on('click', function() {
    $('.gradient').css({
      'height': '150px',
      'width': '150px'
    });
  });
})

div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 10px 20px;
  color: beige;
  transition: all 1s;
}
.gradient{
  position: relative;
}
.gradient.bottom {
  background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 100% 40%, 100% 60%;
  background-position: 0% 100%, 0% 0%;
}
.gradient.top {
  background: linear-gradient(to bottom right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to bottom right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 100% 40%, 100% 60%;
  background-position: 0% 0%, 0% 100%;
}
.gradient.left {
  background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 40% 100%, 60% 100%;
  background-position: 0% 0%, 100% 0%;
}
.gradient.right {
  background: linear-gradient(to top left, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top left, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 40% 100%, 60% 100%;
  background-position: 100% 0%, 0% 0%;
}
.gradient span{
  position: absolute;
}
.gradient.top span{
  top: calc(40% + 5px); /* background size + buffer */ 
  left: 5px;
  height: 50%;
}
.gradient.bottom span{
  top: 5px;
  left: 5px;
  height: 50%;
}
.gradient.left span{
  left: 40%; /* background size */
  top: 5px;
  width: 50%;
}
.gradient.right span{
  left: 5px;
  top: 5px;
  width: 50%;
}

/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}

.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}
.gradient.left{
  clear:both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient bottom"><span>Some content</span>
</div>
<div class="gradient top"><span>Some content</span>
</div>
<div class="gradient left"><span>Some content</span>
</div>
<div class="gradient right"><span>Some content</span>
</div>

<div class='btn-container'>
  <button id="increasew-gradient">Increase Width</button>
  <button id="increaseh-gradient">Increase Height</button>
  <button id="increaseb-gradient">Increase Both</button>
</div>

স্নিপেট প্রসারিত করুন

পেশাদাররা

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

কনস

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

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

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

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

কোড স্নিপেট দেখান

$(document).ready(function() {
  $('#increasew-skew').on('click', function() {
    $('.skew').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-skew').on('click', function() {
    $('.skew').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-skew').on('click', function() {
    $('.skew').css({
      'height': '150px',
      'width': '150px'
    });
  });
})

div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 50px;
  color: beige;
  transition: all 1s;
}
.skew {
  padding: 10px;
  position: relative;
  background: tomato;
}
.skew:after {
  position: absolute;
  content: '';
  background: inherit;
  z-index: -1;
}
.skew.bottom:after,
.skew.top:after {
  width: 100%;
  height: 60%;
}
.skew.left:after,
.skew.right:after {
  height: 100%;
  width: 60%;
}
.skew.bottom:after {
  bottom: 0px;
  left: 0px;
  transform-origin: top left;
  transform: skewY(22deg);
}
.skew.top:after {
  top: 0px;
  left: 0px;
  transform-origin: top left;
  transform: skewY(-22deg);
}
.skew.left:after {
  top: 0px;
  left: 0px;
  transform-origin: bottom left;
  transform: skewX(22deg);
}
.skew.right:after {
  top: 0px;
  right: 0px;
  transform-origin: bottom right;
  transform: skewX(-22deg);
}
.skew:hover {
  background: steelblue;
}
/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.skew.bottom {
  margin-top: 10px;
}
.skew.left {
  clear: both;
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skew bottom">Some content</div>
<div class="skew top">Some content</div>
<div class="skew left">Some content</div>
<div class="skew right">Some content</div>

<div class='btn-container'>
  <button id="increasew-skew">Increase Width</button>
  <button id="increaseh-skew">Increase Height</button>
  <button id="increaseb-skew">Increase Both</button>
</div>

স্নিপেট প্রসারিত করুন

পেশাদাররা

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

কনস

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

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

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

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

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

কোড স্নিপেট দেখান

$(document).ready(function() {
  $('#increasew-rotate').on('click', function() {
    $('.rotate').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-rotate').on('click', function() {
    $('.rotate').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-rotate').on('click', function() {
    $('.rotate').css({
      'height': '150px',
      'width': '150px'
    });
  });
})

div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 50px;
  color: beige;
  transition: all 1s;
}
.rotate {
  position: relative;
  width: 100px;
  background: tomato;
}
.rotate.bottom {
  transform-origin: top;
  transform: perspective(10px) rotateY(-2deg);
}
.rotate.top {
  transform-origin: bottom;
  transform: perspective(10px) rotateY(-2deg);
}
.rotate.left {
  transform-origin: right;
  transform: perspective(10px) rotateX(-2deg);
}
.rotate.right {
  transform-origin: left;
  transform: perspective(10px) rotateX(-2deg);
}
.rotate span {
  position: absolute;
  display: block;
  top: 0px;
  right: 0px;
  width: 50%;
  height: 100%;
}
.rotate.bottom span {
  padding: 10px;
  transform-origin: top;
  transform: perspective(10px) rotateY(2deg);
}
.rotate.top span {
  padding: 20px;
  transform-origin: bottom;
  transform: perspective(20px) rotateY(2deg);
}
.rotate.left span {
  padding: 10px;
  transform-origin: right;
  transform: perspective(10px) rotateX(2deg);
}
.rotate.right span {
  padding: 0px 30px;
  transform-origin: left;
  transform: perspective(10px) rotateX(2deg);
}
.rotate:hover {
  background: steelblue;
}

/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.rotate.left{
  clear:both;
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotate bottom"><span>Some content</span>
</div>
<div class="rotate top"><span>Some content</span>
</div>
<div class="rotate left"><span>Some content</span>
</div>
<div class="rotate right"><span>Some content</span>
</div>

<div class='btn-container'>
  <button id="increasew-rotate">Increase Width</button>
  <button id="increaseh-rotate">Increase Height</button>
  <button id="increaseb-rotate">Increase Both</button>
</div>

স্নিপেট প্রসারিত করুন

পেশাদাররা

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

কনস

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

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

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

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

কোড স্নিপেট দেখান

$(document).ready(function() {
  $('#increasew-clip').on('click', function() {
    $('.clip-path').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-clip').on('click', function() {
    $('.clip-path').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-clip').on('click', function() {
    $('.clip-path').css({
      'height': '150px',
      'width': '150px'
    });
  });
})

.clip-path {
  position: relative;
  float: left;
  margin: 20px;
  height: 100px;
  width: 100px;
  background: tomato;
  padding: 4px;
  transition: all 1s;
}
.clip-path.bottom {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top {
  -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path.left {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40% 100%);
}
.clip-path.right {
  -webkit-clip-path: polygon(0% 0%, 60% 0%, 100% 100%, 0% 100%);
}
.clip-path .content {
  position: absolute;
  content: '';
  height: calc(100% - 10px);
  width: calc(100% - 8px);
  background: bisque;
}
.clip-path.bottom .content {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top .content {
  -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path .content.img {
  top: 6px;
  background: url(http://lorempixel.com/250/250);
  background-size: 100% 100%;
}
/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.clip-path.left {
  clear: both;
}
.clip-path:hover {
  background: gold;
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 20px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clip-path bottom">
  <div class="content">abcd</div>
</div>
<div class="clip-path top">
  <div class="content img"></div>
</div>
<div class="clip-path left"></div>
<div class="clip-path right"></div>

<div class='btn-container'>
  <button id="increasew-clip">Increase Width</button>
  <button id="increaseh-clip">Increase Height</button>
  <button id="increaseb-clip">Increase Both</button>
</div>

স্নিপেট প্রসারিত করুন

পেশাদাররা

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

কনস

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

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

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

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

কোড স্নিপেট দেখান

window.onload = function() {
  var canvasEls = document.getElementsByTagName('canvas');
  for (var i = 0; i < canvasEls.length; i++) {
    paint(canvasEls[i]);
  }

  function paint(canvas) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    if (canvas.className == 'bottom') {
      ctx.moveTo(0, 0);
      ctx.lineTo(250, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(0, 60);
    } else if (canvas.className == 'top') {
      ctx.moveTo(0, 40);
      ctx.lineTo(250, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(0, 100);
    } else if (canvas.className == 'left') {
      ctx.moveTo(0, 0);
      ctx.lineTo(250, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(60, 100);
    } else if (canvas.className == 'right') {
      ctx.moveTo(0, 0);
      ctx.lineTo(190, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(0, 100);
    }
    ctx.closePath();
    ctx.lineCap = 'round';
    ctx.fillStyle = 'tomato';
    ctx.fill();
  }
  $('#increasew-canvas').on('click', function() {
    $('.container').css({
      'width': '150px',
      'height': '100px'
    });
  });
  $('#increaseh-canvas').on('click', function() {
    $('.container').css({
      'width': '100px',
      'height': '150px'
    });
  });
  $('#increaseb-canvas').on('click', function() {
    $('.container').css({
      'width': '150px',
      'height': '150px'
    });
  });
};

.container {
  float: left;
  position: relative;
  height: 100px;
  width: 100px;
  margin: 20px;
  color: beige;
  transition: all 1s;
}
canvas {
  height: 100%;
  width: 100%;
}
.container > span {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 5px;
}
.top + span {
  top: 40%; /* size of the angled area */
}
.left + span {
  left: 40%; /* size of the angled area */
}

/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}
div:nth-of-type(3) {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <canvas height="100px" width="250px" class="bottom"></canvas> <span>Some content</span>

</div>
<div class="container">
  <canvas height="100px" width="250px" class="top"></canvas> <span>Some content</span>

</div>
<div class="container">
  <canvas height="100px" width="250px" class="left"></canvas> <span>Some content</span>

</div>
<div class="container">
  <canvas height="100px" width="250px" class="right"></canvas> <span>Some content</span>

</div>
<div class='btn-container'>
  <button id="increasew-canvas">Increase Width</button>
  <button id="increaseh-canvas">Increase Height</button>
  <button id="increaseb-canvas">Increase Both</button>
</div>

স্নিপেট প্রসারিত করুন

পেশাদাররা

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

কনস

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

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

Question 3

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

পদ্ধতি 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;।

Question 4

আমার সমাধানটি পদ্ধতি 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>

স্নিপেট প্রসারিত করুন

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

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

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

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

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

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

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

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

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