响应CSS梯形 [英] Responsive CSS Trapezoid Shape

问题描述

我想要创建一个响应的梯形形状，可以是CSS，SVG或Canvas。

我已经能够创建三角形，而不是响应的梯形。

  div {width：0; height：0; border-top：5vw实心透明; border-left：10vw solid red; border-bottom：5vw solid transparent;}  

 < div> ;< / div>  

我看到有很多问题已经包含梯形形状，但很少有理由说明为什么它们比其他方法更好，而且大多数都不响应。

例如，这些问题不需要响应，因此答案不响应：

• CSS3变形倾斜


• 
  

解决方案 div>

有很多不同的方法来创建梯形，每个都有自己的优点和衰退。

下面是各种方法和所有应该是响应式的。

CSS Border

它是支持的方式回到IE和桌面和移动上的所有其他浏览器。

• border - CSS | MDN

  #trapezoid {border-left：20vw solid red; border-top：5vw实心透明;边框底部：5vw实心透明; width：0; height：10vw;}  

 < div id =trapezoid >< / div>  

CSS透视

CSS中一个相当新的方法是CSS Transforms中的透视方法。

• https://developer.mozilla.org/en/docs/Web/CSS/perspective =nofollow> perspective - CSS | MDN

  #trapezoid {margin-top：3vw; width：20vw;高度：10vw;背景颜色：红色; transform：perspective（20vw）rotateY（45deg）;}  

  < div id =trapezoid>< / div>  

< h2> CSS Clip-Path

剪辑路径创建一个SVG样式剪辑，并使用它来创建所需的形状。这是最简单的方式（在我看来，至少）在纯CSS创建任何和所有的形状，但是不是很好支持，即使在现代浏览器。

• clip-path - CSS | MDN


• CanIUse支持
• 
  
• 剪辑路径生成器

  #trapezoid {width：20vw; height：20vw; -webkit-clip-path：polygon（0 0，100％20％，100％80％，0％100％）; clip-path：polygon（0 0，100％20％，100％80％，0％100％）; background：red;}  

 < div id =trapezoid >< / div>  

这个回答是由 web-tiki

它与透视答案类似，它使用变换，但也使用具有偏斜的伪元素。

• skew - CSS | MDN

  #trapezoid {position：relative;背景：红色; width：20vw; height：12vw; margin：8vw 0;}＃trapezoid：before，＃trapezoid：after {content：''; position：absolute; left：0; width：100％;高度：100％;背景：inherit; transform-origin：100％0; transform：skewY（-20deg）;}＃trapezoid：before {transform：skewY（20deg）;}  

 < div id =trapezoid>< / div>  

>

SVG

SVG代表Scalable Vector Graphic。网络浏览器将其视为图像，但您可以在SVG中添加文本和正常的HTML元素。

它在所有浏览器中均可支持，如下所示： CanIUse

• SVG | MDN

 < svg id =trapezoidviewbox =0 0 100 100 preserveAspectRatio =nonewidth =20％> < path d =M0,0 L100,20 L100,80 L0100zfill =red>< / path>< / svg>  
 

Canvas

Canvas与SVG类似，但使用栅格基于）而不是向量来创建形状。

Canvas的浏览器支持

  var shape = document.getElementById（'trapezoid'）。getContext '）; shape.fillStyle ='red'; shape.beginPath（）; shape.moveTo（0，0）; shape.lineTo（100，20）; shape.lineTo（100，80）; shape.lineTo（0， 100）; shape.closePath（）; shape.fill（）;  

 < canvas id =trapezoid>< / canvas>  

I'm looking to create a responsive trapezoid shape which can be in either CSS, SVG or Canvas.

I have been able to create the triangle shape but not a trapezoid shape that is responsive.

div {
  width: 0;
  height: 0;
  border-top: 5vw solid transparent;
  border-left: 10vw solid red;
  border-bottom: 5vw solid transparent;
}

<div></div>

I have seen there are many questions on SO already that encompass a trapezoid shape but very little have reasons why they are better than other methods and also a large majority aren't responsive.

As an example, these questions don't require responsiveness and therefore the answers aren't responsive:

• CSS3 Transform Skew
• create an adaptive quadrilateral trapezoid in css

解决方案

There are many different ways to create the trapezoid shape and each have their own benefits and downfalls.

Below is a comprehensive list of the various ways and all should be responsive.

CSS Border

The most well supported of all the answers. It is supportwed way back to IE and across all other browsers both on the desktop and mobile.

• border - CSS | MDN

#trapezoid {
  border-left: 20vw solid red;
  border-top: 5vw solid transparent;
  border-bottom: 5vw solid transparent;
  width: 0;
  height: 10vw;
}

<div id="trapezoid"></div>

CSS Perspective

A fairly new approach within CSS is the perspective method within CSS Transforms. It is now reasonably well supported across all modern browsers but can be quite difficult to get the exact shape size you want.

• perspective - CSS | MDN

#trapezoid {
  margin-top: 3vw;
  width: 20vw;
  height: 10vw;
  background-color: red;
  transform: perspective(20vw) rotateY(45deg);
}

<div id="trapezoid"></div>

CSS Clip-Path

Clip-paths create an SVG style clip and uses that to create the shape you want. It is the most simplistic way (atleast in my opinion) to create any and all shapes with just pure CSS but isn't very well supported, even in modern browsers.

• clip-path - CSS | MDN
• CanIUse Support
• clip-path Generator

#trapezoid {
  width: 20vw;
  height: 20vw;
  -webkit-clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
  background: red;
}

<div id="trapezoid"></div>

CSS Skew with Pseudo Elements

This answer was given to me by web-tiki

It is similar to the perspective answer in that it uses transforms but also uses pseudo elements which have the skew on instead.

• skew - CSS | MDN

#trapezoid {
  position: relative;
  background: red;
  width: 20vw;
  height: 12vw;
  margin: 8vw 0;
}
#trapezoid:before,
#trapezoid:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform-origin: 100% 0;
  transform: skewY(-20deg);
}
#trapezoid:before {
  transform: skewY(20deg);
}

<div id="trapezoid"></div>

SVG

SVG stands for Scalable Vector Graphic. The web browser views it as an image but you can add text and normal HTML elements within an SVG.

It is well supported across all browsers as viewable here: CanIUse

• SVG | MDN

<svg id="trapezoid" viewbox="0 0 100 100" preserveAspectRatio="none" width="20%">
  <path d="M0,0
           L100,20
           L100,80
           L0,100z" fill="red"></path>
</svg>

Canvas

Canvas is similar to SVG but uses a raster (pixel based) instead of a vector to create the shape.

The browser support for Canvas is quite good.

var shape = document.getElementById('trapezoid').getContext('2d');
shape.fillStyle = 'red';
shape.beginPath();
shape.moveTo(0, 0);
shape.lineTo(100, 20);
shape.lineTo(100, 80);
shape.lineTo(0, 100);
shape.closePath();
shape.fill();

<canvas id="trapezoid"></canvas>

这篇关于响应CSS梯形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！