不规则的矩形

Question

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

我怎样才能实现它？

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

Answer 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的技巧。

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

没有黑匣子：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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一种工具，它使自定义形状的制作过程更易于管理。