是否可以用CSS创建这个不规则的四边形？

Question

我试过perspective这里的解决方案如何分别转换形状的每一面？但由于形状的不规则性,可能无法使其工作.只有顶部和右侧的列是倾斜的,垂直和底部是直的.我怎么能用CSS做到这一点？

Answer 1

使用CSS边框可以创建三角形和梯形.

您可以实现连接三角形和梯形的形状.

.triangle {
  border: 0 solid red;
  border-left-width: 500px;
  border-top-width: 30px;
  border-top-color: transparent;
}
.trapezoid {
  border: 0 solid red;
  width: 500px;
  border-bottom-width: 150px;
  border-right-width: 30px;
  border-right-color: transparent;
}

<div class="triangle"></div>
<div class="trapezoid"></div>

Answer 2

方法1:剪辑路径

您可以使用CSS clip-path功能将矩形剪切为所需的多边形形状.

div {
  box-sizing: border-box;
  height: 150px;
  width: 250px;
  background: red;
  padding: 10px;
  -webkit-clip-path: polygon(0% 0%, 90% 10%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 90% 10%, 100% 100%, 0% 100%);
}
div#image {
  background: url(http://lorempixel.com/400/200);
}

/* Just for demo */

div{
  float: left;
  margin: 10px;
  transition: all 1s;
}
div:hover{
  height: 200px;
  width: 300px;
}

<div>Some text</div>
<div id="image"></div>

优点:

• 支持形状内的非纯色填充,并允许文本存在于其中.
• 形状是响应性的,即使容器的尺寸发生变化也能适应.

缺点:

• 浏览器支持CSSclip-path功能不佳.这可以通过克服使用内联SVG为clip-path在下面的代码片段一样,因为这有更好的浏览器支持.

div {
  box-sizing: border-box;
  height: 150px;
  width: 250px;
  padding: 10px;
  background: red;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}
div#image {
  background: url(http://lorempixel.com/400/200);
}

/* Just for demo */

div{
  float: left;
  margin: 10px;
  transition: all 1s;
}
div:hover{
  height: 200px;
  width: 300px;
}

<svg width="0" height="0">
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="M0 0, 0.9 0.1, 1 1, 0 1z" />
    </clipPath>
  </defs>
</svg>
<div>
  Some text
</div>
<div id="image"></div>

方法2:CSS转换

一般情况下,当形状(或)中的图像或文本等内容在形状的背景不是纯色时,最好不要使用变换,因为那时我们要么必须(a)反向变换分别使子元素看起来正常或(b)使用绝对定位.

对于这种特殊形状,即使在使用变换但具有非纯色背景颜色的情况下,在形状内部具有文本也不是问题.

选项1:使用两个伪元素

您可以使用几个具有倾斜变换的伪元素,一个位于顶部,另一个位于右侧以生成所需的形状.将形状悬停在代码段中以查看其创建方式.

div {
  position: relative;
  height: 150px;
  width: 250px;
  background: red;
  margin: 40px 40px 0px 0px;
}
div:after,
div:before {
  position: absolute;
  content: '';
  background: red;
  z-index: -1;
  backface-visibility: hidden;
}
div:before {
  height: 12.5%;
  width: 100%;
  top: 0px;
  left: 0px;
  transform-origin: right top;
  transform: skewY(3deg);
}
div:after {
  height: 100%;
  width: 12.5%;
  right: -1px;
  top: -1px;
  transform-origin: right top;
  transform: skewX(10deg);
}

/* Just for demo */

div{
  transition: all 1s;
}  
div:hover{
  height: 250px;
  width: 300px;
}
div:hover:after{
  background: blue;
}
div:hover:before{
  background: green;
}

<div>Some text</div>

优点:

• 可以使用单个元素创建形状,并且可以在其中包含文本而不会有任何问题.

缺点:

• 将渐变(或)图像作为形状的背景是复杂的,因为它们需要如前所述的反向旋转.
• 形状不是100%可扩展的,因为容器的尺寸应按比例改变以保持hover形状(在片段中的形状上看看我的意思).原因与此处提到的相同.

选项2:使用一个伪元素

这与前一个选项非常相似,只是它使用单个伪元素和overflow: hidden父元素.

div {
  position: relative;
  box-sizing: border-box;
  height: 200px;
  width: 300px;
  padding: 10px;
  overflow: hidden;
}
div:after {
  position: absolute;
  content: '';
  top: 0px;
  left: -20px;
  height: 100%;
  width: 100%;
  background: red;
  transform-origin: left bottom;
  transform: skewY(5deg) skewX(7.5deg);
  z-index: -1;
}
div:hover {
  height: 300px;
  width: 500px;
  transition: all 1s;
}

<div>Some text</div>

优点:

• 可以使用单个元素创建形状,并且可以在其中包含文本而不会有任何问题.
• 形状是响应性的,即使容器的尺寸发生变化也能适应.

缺点:

• 与渐变和图像背景的上一个选项相同的约束.
• 如果overflow: hidden父级是约束,则不适用.