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

时间：2015-07-25 11:52:47

标签： css css3 css-shapes

Only the top and right side columns are skewed

我在这里试过了perspective解决方案How to transform each side of a shape separately?，但由于形状不规则，无法使其工作。只有顶部和右侧的列是倾斜的，垂直和底部是直的。我怎么能用CSS做到这一点？

5 个答案:

答案 0 :(得分：8)

使用CSS边框可以创建triangles和梯形。

你可以实现连接三角形和梯形的形状。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<div class="triangle"></div>
<div class="trapezoid"></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：6)

方法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>

<强>优点：

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

<强>缺点： 

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>

<强>优点：

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

<强>缺点：

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

选项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>

<强>优点：

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

<强>缺点：

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

答案 2 :(得分：2)

解决方案是：

div {
    width: 300px;
    height: 100px;
    margin:50px;
    background-color: yellow;
    border: 1px solid black;
}

.thisdiv {
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg); /* Standard syntax */
}
<div class="thisdiv">
    This is the div I will skew
</div>

这是如何扭曲一个元素，如果你想制作你添加的形状，尝试使用两个重叠的div，位置，缩放，旋转和倾斜，如下所示：

.outer-div{
    position:relative;
    margin:50px;
    width:200px;
    height:200px;
    border:2px black dashed;
}
.inner-one{
    position:absolute;
    left:0;
    bottom:0;
    width:180px;
    height:180px;
    background:red;
}
.inner-two{
    position:absolute;
    bottom:2px;
    right:0px;
    width:200px;
    height:195px;
    background:red;
    transform: rotate(7deg) skew(14deg) scale(0.905); /* Standard syntax */
}
<div class="outer-div">
    <div class="inner-one">
    </div>
    <div class="inner-two">
    </div>
</div>

答案 3 :(得分：2)

CSS中不规则四边形的2个三角解

在查看图像时，我注意到顶部和右侧的歪斜实际上只是长而窄的三角形覆盖矩形。

enter image description here

所以我所做的是使用CSS边框属性创建三角形，并将它们绝对放在矩形上。

＆＃13;
＆＃13; 
#rectangle {
  width: 400px;
  height: 200px;
  background-color: red;
  margin-top: 25px;
  position: relative;
}
#triangle-down {
  border-left: 30px solid red;
  border-right: 0;
  border-top: 200px solid transparent;
  position: absolute;
  right: -30px;
  top: 0;
}
#triangle-left {
  border-top: 0;
  border-bottom: 15px solid red;
  border-right: 400px solid transparent;
  position: absolute;
  right: 0;
  top: -15px;
}
＆＃13; 
<div id="rectangle">
  <div id="triangle-down"></div>
  <div id="triangle-left"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

jsFiddle demo

答案 4 :(得分：1)

您可以查看clip-path属性（请参阅下面的MDN），但支持非常不完整。 Chrome 24+支持前缀和FF，但仅支持引用SVG中路径的URL值。你可以read more about clip-path here。

Here's a basic pen - 这只适用于Chrome。

来自MDN

  

剪辑路径CSS属性通过定义要显示的剪辑区域来防止元素的一部分显示，即，仅显示元素的特定区域。剪切区域是指定为引用内联或外部SVG的URL的路径，或者是诸如circle（）之类的形状方法。 clip-path属性替换现在已弃用的剪辑属性。

  • developer.mozilla.org/en-US/docs/Web/CSS/clip-path（抱歉，没有足够的代表链接）
相关问题
最新问题