如何分别转换形状的每一边？

Question

如何创建一个单独转换每一面的CSS形状。

类似于下图中的形状。

只有没有图像才可以使用CSS吗？

Answer 1

我认为CSS中没有任何方法可以单独选择和转换每一面，但是你可以通过使用透视变换（纯CSS）来实现相关的形状。

沿着X轴和Y轴以透视方式旋转元素，可以产生具有单独变换的每一面的效果。您可以调整角度和透视设置以完全按照要求创建形状。

＆＃13;

＆＃13;

.shape {
  background: black;
  margin: 100px;
  height: 200px;
  width: 200px;
  transform: perspective(20px) rotateX(-2deg) rotateY(-1deg); /* make perspective roughly 10% of height and width */
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape"></div>

＆＃13;

＆＃13;

＆＃13;

或者，您可以使用clip-path功能。可以通过单独使用CSS或使用内联SVG来创建剪辑路径。 SVG剪辑路径比CSS版本具有更好的浏览器支持。

＆＃13;

＆＃13;

div {
  height: 200px;
  width: 200px;
  background: black;
}
.css-clip {
  -webkit-clip-path: polygon(0% 10%, 100% 0%, 85% 100%, 15% 95%);
  clip-path: polygon(0% 10%, 100% 0%, 85% 100%, 15% 95%);
}
.svg-clip {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

/* Just for demo */

div{
  display: inline-block;
  margin: 10px;
  line-height: 200px;
  text-align: center;
  color: beige;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<!-- CSS Clip path -->
<div class='css-clip'>CSS Clip Path</div>

<!-- SVG Clip path -->
<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0 0.1, 1 0, 0.85 1, 0.15 0.95' />
    </clipPath>
    </defs>
</svg>
<div class='svg-clip'>SVG Clip path</div>

＆＃13;

＆＃13;

＆＃13;

  

注意：虽然可以使用CSS实现这种形状，但最好不要将CSS用于这种复杂的形状。

Answer 2

与许多与边距，填充和边框相关的CSS属性一样，有四个单独的属性 - 一个用于框元素的每个角落 - 以及一个速记属性。每个角点属性都将接受一个或两个值。 border-radius属性在WebKit浏览器中最多可接受两个值，在Firefox 3.5中最多可接受八个。

-moz-border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px
border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px

Demo

Answer 3

查看here以获取解释see here。基本上你需要一个矩形和四个三角形或一个平行四边形和两个矩形。取决于你想要达到的目标。

Answer 4

#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

使用这个我觉得对你有用。

以及任何其他形状，请访问此链接http://www.css3shapes.com/