不规则的矩形

Question

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

我怎样才能实现它？

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

Answer 1

您正在寻找CSS Masking和Shapes Modules

在这里挖掘:html5rocks.com上的CSS掩码

这里还有一个很好的解释用例:使用CSS形状创建非矩形布局

您可以创建任何您想要的形状,将其应用于您想要的任何形状:图像,背景,文本,另一种形式 - 没有限制.而且,你可以动画它!

这是一个很好的服务用鼠标来裁剪这些东西: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%);
}

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