รูปร่างเอียงข้าง (ตอบสนอง)

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.
การไล่ระดับสีเชิงเส้นด้วยไวยากรณ์ของมุม (เช่น 45deg, 30deg เป็นต้น)

วิธีการที่สามารถรองรับขนาดไดนามิกได้อธิบายไว้ด้านล่าง

วิธีที่ 1 - SVG

( ความเข้ากันได้ของเบราว์เซอร์ )

SVG สามารถใช้เพื่อสร้างรูปร่างได้โดยใช้polygons หรือpaths 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>

ขยายข้อมูลโค้ด

ข้อดี

SVG ได้รับการออกแบบมาเพื่อสร้างกราฟิกที่ปรับขนาดได้และสามารถทำงานได้ดีกับการเปลี่ยนแปลงมิติทั้งหมด
เส้นขอบและเอฟเฟกต์โฮเวอร์สามารถทำได้โดยมีค่าใช้จ่ายในการเข้ารหัสน้อยที่สุด
ภาพหรือพื้นหลังไล่ระดับสีให้กับรูปร่างได้

จุดด้อย

การรองรับเบราว์เซอร์อาจเป็นข้อเสียเพียงอย่างเดียวเนื่องจาก IE8- ไม่รองรับ SVG แต่สามารถลดลงได้โดยใช้ไลบรารีเช่น Raphael และ VML ยิ่งไปกว่านั้นการรองรับเบราว์เซอร์ก็ไม่เลวร้ายไปกว่าตัวเลือกอื่น ๆ

วิธีที่ 2 - พื้นหลังไล่ระดับสี

( ความเข้ากันได้ของเบราว์เซอร์ )

การไล่ระดับสีเชิงเส้นยังสามารถใช้เพื่อสร้างรูปร่างได้ แต่ไม่สามารถใช้กับมุมตามที่กล่าวไว้ในคำถาม เราต้องใช้to [side] [side]ไวยากรณ์ (ขอบคุณvals ) แทนการระบุมุม เมื่อระบุด้านข้างมุมการไล่ระดับสีจะถูกปรับโดยอัตโนมัติตามขนาดของคอนเทนเนอร์

แสดงข้อมูลโค้ด

$(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 - Skew Transforms

( ความเข้ากันได้ของเบราว์เซอร์ )

ในวิธีนี้จะมีการเพิ่มองค์ประกอบหลอกเอียงและวางตำแหน่งในลักษณะที่ดูเหมือนว่าขอบด้านใดด้านหนึ่งเอียง / ทำมุมหากขอบด้านบนหรือด้านล่างเอียงการเอียงควรอยู่ตามแกน Y หรือไม่เช่นนั้น การหมุนควรเป็นไปตามแกน X 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 - CSS Clip Path

( ความเข้ากันได้ของเบราว์เซอร์ )

ในวิธีนี้คอนเทนเนอร์หลักจะถูกตัดเป็นรูปร่างที่ต้องการโดยใช้รูปหลายเหลี่ยม ควรแก้ไขจุดของรูปหลายเหลี่ยมขึ้นอยู่กับด้านที่ต้องการขอบเอียง

แสดงข้อมูลโค้ด

$(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วิธีการ
ภาพหรือพื้นหลังไล่ระดับสีให้กับรูปร่างได้
ทางเลือกที่ดีกว่าหากต้องการเอฟเฟ็กต์ภาพเคลื่อนไหวแบบเรียลไทม์เนื่องจากไม่ต้องใช้การจัดการ DOM

จุดด้อย

ผ้าใบเป็นไปตามแรสเตอร์และด้วยเหตุนี้ขอบมุมจะกลายเป็นตัวหนังสือหรือเบลอเมื่อปรับขนาดเกินกว่าจุด*

^{* - การหลีกเลี่ยงการสร้างพิกเซลจะต้องมีการเปลี่ยนรูปร่างใหม่ทุกครั้งที่มีการปรับขนาดวิวพอร์ต มีตัวอย่างอยู่ที่นี่แต่เป็นค่าใช้จ่าย}

Question 3

ฉันลองใช้วิธีเส้นขอบแต่ขนาดของรูปร่างของฉันเป็นแบบไดนามิกดังนั้นฉันจึงไม่สามารถใช้วิธีนี้ได้

วิธีที่ 7 - หน่วยวิวพอร์ต ^{(Border Redux )}

( ความเข้ากันได้ของเบราว์เซอร์ )

Viewport Unitsเป็นนวัตกรรมที่ยอดเยี่ยมใน CSS3 ในขณะที่คุณสามารถใช้ค่าเปอร์เซ็นต์เพื่อทำให้คุณสมบัติของคุณมีชีวิตชีวา แต่คุณไม่สามารถทำได้สำหรับ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

โซลูชันของฉันได้รับแรงบันดาลใจจากวิธีที่เรียกว่าMethod 7 - Viewport Unitsโดย Andrea Ligios ด้านบนในหน้านี้

ฉันใช้หน่วย "แนวนอน" สำหรับความสูงด้วย ( height:10vw) เพื่อรักษาสัดส่วนที่กำหนดไว้ในสี่เหลี่ยมคางหมูเมื่อปรับขนาดความกว้างของหน้าต่างนำทาง เราอาจจะเรียกสิ่งนี้7b วิธี - Viewport กว้าง

นอกจากนี้การใช้สองdivs ที่ซ้อนกันแทนที่จะเป็นหนึ่งตัวและ: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 - SVG

วิธีที่ 2 - พื้นหลังไล่ระดับสี

วิธีที่ 3 - Skew Transforms

วิธีที่ 4 - การแปลงมุมมอง

วิธีที่ 5 - CSS Clip Path

วิธีที่ 6 - ผ้าใบ

วิธีที่ 7 - หน่วยวิวพอร์ต (Border Redux )

วิธีที่ 7 - หน่วยวิวพอร์ต ^{(Border Redux )}