如何分别转换形状的每一边？ [英] How to transform each side of a shape separately?

问题描述

如何创建一个CSS形状，其中每个边都单独转换。

类似下面图像中的形状。

解决方案

我不认为有什么办法在CSS中选择分别变换每一边，但您可以通过使用透视变换（纯CSS）实现有问题的形状。

使用透视沿着X轴和Y轴旋转元素sort of产生了具有单独变换的每一边的效果。

  .shape {background：black; margin：100px; height：200px; width：200px; transform：perspective（20px）rotateX（-2deg）rotateY（-1deg）; / * make perspective约10％的高度和宽度* /}  

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

---

$ b b

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

  div {height：200px; width：200px;背景：黑色;}。css-clip {-webkit-clip-path：polygon（0％10％，100％0％，85％100％，15％95％）; clip-path：多边形（0％10％，100％0％，85％100％，15％95％）;}。svg-clip {-webkit-clip-path：url（#clipper）; clip-path：url（#clipper）;} / *只是演示* / div {display：inline-block; margin：10px; line-height：200px; text-align：center; color：beige;}  

 < script src =https ：//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script><！ -  CSS剪辑路径 - >< div class = css-clip'> CSS剪辑路径< / div><！ -  SVG剪辑路径 - >< 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剪辑路径< / div>  

>

b b b b b 复杂的形状。

How do I create a CSS shape in which each side is transformed separately.

Something like the shape in the below image.

Is that possible using CSS only without images?

解决方案

I don't think there is any way in CSS to pick and transform each side separately but you can achieve the shape in question by using perspective transforms (pure CSS).

Rotating the element with perspective along both X and Y axes sort of produces the effect of each side having a separate transformation. You can adjust the angles and the perspective setting to create the shape exactly as required.

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

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

---

Or, you could make use of the clip-path feature. Clip paths can be created either by using CSS alone or by using inline SVG. SVG clip paths have much better browser support than the CSS version.

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;
}

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

Note: Though this shape can be achieved using CSS, it is better not to use CSS for such complex shapes.

这篇关于如何分别转换形状的每一边？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！