एक slanted पक्ष के साथ आकार (उत्तरदायी)

Question 1

मैं नीचे की ओर केवल एक तरफ (उदाहरण के लिए, नीचे की ओर) झुका हुआ किनारे के साथ छवि में एक आकृति बनाने की कोशिश कर रहा हूं जबकि अन्य किनारे सीधे बने हुए हैं।

CSS div तिरछे पक्ष के साथ

मैंने सीमा विधि का उपयोग करने की कोशिश की (कोड नीचे दिया गया है) लेकिन मेरे आकार के आयाम गतिशील हैं और इसलिए मैं इस पद्धति का उपयोग नहीं कर सकता।

.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।
कोण सिंटैक्स (जैसे 45 डिग्री, 30 डिग्री आदि) के साथ रैखिक ग्रेडिएंट।

गतिशील आकार का समर्थन करने वाले तरीके नीचे वर्णित हैं।

विधि 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 - तिरछा रूपांतरण

( ब्राउज़र संगतता )

इस विधि में, एक छद्म तत्व जोड़ा जाता है, तिरछा और इस तरह से लगाया जाता है कि ऐसा लगता है कि किनारों में से एक को तिरछा किया गया है / angled.If ऊपर या नीचे का किनारा धीमा है, तिरछा Y अक्ष के साथ होना चाहिए, अन्यथा रोटेशन एक्स अक्ष के साथ होना चाहिए। transform-originSlanted पक्ष की ओर विपरीत होनी चाहिए।

कोड स्निपेट दिखाएं

$(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-originSlanted पक्ष की ओर विपरीत होनी चाहिए।

कोड स्निपेट दिखाएं

$(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 )}

( ब्राउज़र संगतता )

सीएसएस 3 में व्यूपोर्ट इकाइयां एक बेहतरीन नवाचार हैं। जब आप आमतौर पर अपने गुणों को गतिशील करने के लिए प्रतिशत मानों का उपयोग कर सकते हैं, तो आप इसे border-widths ( न ही font-sizes ) के लिए नहीं कर सकते ।

व्यूपोर्ट इकाइयों की तुलना में, आप व्यूपोर्ट आयाम की तुलना में, अपनी वस्तुओं के आकार के साथ-साथ अपनी सीमा की चौड़ाई को गतिशील रूप से निर्धारित कर सकते हैं ।

_{नोट: प्रतिशत मान पेरेंट ऑब्जेक्ट के लिए संदर्भित होते हैं, व्यूपोर्ट (विंडो का दृश्य क्षेत्र) के लिए नहीं।}

विधि का परीक्षण करने के लिए, निम्नलिखित स्निपेट पूर्ण पृष्ठ लॉन्च करें और इसे क्षैतिज और लंबवत रूप से आकार दें।

.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

मेरा समाधान इस पृष्ठ में ऊपर एंड्रिया लिगियोस द्वारा व्यू 7 की विधि 7 नामक एक से प्रेरित है ।

मैंने ऊँचाई के लिए "क्षैतिज" इकाई का भी उपयोग किया ( height:10vw) नेविगेशन विंडो की चौड़ाई का आकार बदलने के दौरान ट्रेपोज़ॉइड में दिए गए अनुपात को रखने के लिए। हम इस विधि को 7b - व्यूपोर्ट चौड़ाई कह सकते हैं ।

इसके अलावा, 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>

स्निपेट का विस्तार करें

एक slanted पक्ष के साथ आकार (उत्तरदायी)

विधि 1 - एसवीजी

विधि 2 - ग्रेडिएंट बैकग्राउंड

विधि 3 - तिरछा रूपांतरण

विधि 4 - परिप्रेक्ष्य ट्रांसफ़ॉर्म

विधि 5 - सीएसएस क्लिप पथ

विधि 6 - कैनवस

विधि 7 - व्यूपोर्ट इकाइयाँ (सीमा Redux )

विधि 7 - व्यूपोर्ट इकाइयाँ ^{(सीमा Redux )}