不规则长方形答案

【问题标题】：Irregular rectangle shape不规则长方形
【发布时间】：2018-01-08 19:47:09
【问题描述】：

我想制作一个看起来有点像下图中的蓝色框的矩形（最好不使用画布或背景图像）。请注意，该形状有不规则的边缘。

我怎样才能实现它？

div {
    background: blue;
    width: 400px;
    height: 120px;
}

【问题讨论】：

您面临的问题或您想问的问题究竟是什么，因为您所做的只是告诉我们您要做什么。
酷。然后让它:)
问题是我不知道从哪里开始。我不想使用背景图片-
基本上分享你尝试过的代码
@JulianEspinosa 谢谢，您的帮助意味着全世界。

标签： html css sass

【解决方案1】：

您正在寻找 CSS 遮罩和形状模块

在这里挖掘：CSS Masking on html5rocks.com

这里还有一个很好的用例解释：Creating Non-Rectangular Layouts With CSS Shapes

您可以创建您想要的任何形状，将其应用于您想要的任何东西：图像、背景、文本、其他形式 - 没有限制。此外，您还可以对其进行动画处理！

这里有一个很好的服务来用鼠标裁剪这样的东西：http://bennettfeely.com/clippy/

注意，目前并非所有浏览器都支持：http://caniuse.com/css-clip-path/embed

是的，不需要 SVG 或图像 - 灵活、动态、仅 css 的技巧。

.box{
  width: 400px; height: 120px; background:black; position:relative
}
.poly{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  background:#2abcd0;
  -webkit-clip-path:polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%);
clip-path: polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%);
}

<div class="box">
<div class="poly"></div>
</div>

并且没有黑匣子：

.poly{
  width:400px;
  height:120px;
  background:#2abcd0;
  -webkit-clip-path:polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%);
clip-path: polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%);
}

&lt;div class="poly"&gt;&lt;/div&gt;

【讨论】：

谢谢。如果我不想要盒子怎么办？只有蓝色。
那就不用框了，加了sn-p
是的，但是它会被抵消。
是的，由css多边形的参数控制。现在它至少有 6% 的偏移量

【解决方案2】：

Divs 一直是矩形的。如果您有时间使用坐标单独追踪它，您可以制作一些复杂的形状。查看this page 了解您可以轻松组合的形状列表，并使用这些相同的想法构建您自己的更复杂的形状。

你最终可能会得到类似......

shape-outside: polygon(170.67px 291.00px,126.23px 347.56px,139.79px 417.11px,208.92px 466.22px,302.50px 482.97px,343.67px 474.47px,446.33px 452.00px,443.63px 246.82px,389.92px 245.63px,336.50px 235.26px,299.67px 196.53px,259.33px 209.53px,217.00px 254.76px);

也请查看此tutorial。她谈到了shapses to poly 一种工具，它使制作自定义形状的过程更加易于管理。

【讨论】：

我只是在演示这个想法，（我实际上是从某人的网站上提取了那个 sn-p）这个想法仍然很重要，您可以根据需要将其转换为可扩展的模型。跨度>
终于有人真正阅读了这个问题。谢谢！将对此进行调查。