是否有可能用CSS创建这个不规则四边形？ [英] Is it possible to create this irregular quadrilateral with CSS?

问题描述

我试过了透视解决方案这里如何变形形状的每一边单独？但是不能让它工作可能是由于形状的不规则性。只有顶部和右侧列是倾斜的，垂直和底部是直的。如何使用CSS？

解决方案

使用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>   


I've tried the perspective solution here How to transform each side of a shape separately? but can't get it to work probably due to the irregularness of the shape. Only the top and right side columns are slanted, vertical and bottom are straight. How can I do this with CSS?
解决方案
Using CSS borders you can create triangles and trapezoids.

You can achieve your shape joining a triangle and a trapezoid.



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





                        
这篇关于是否有可能用CSS创建这个不规则四边形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！