我想制作一个矩形(最好不使用画布或背景图像),看起来有点像下图中的蓝色框.请注意,形状具有不规则的边缘.
我怎样才能实现它?
![在此输入图像描述](https://img.php1.cn/3cd4a/1eebe/cd5/6c257b6ba227cc3e.webp)
div {
background: blue;
width: 400px;
height: 120px;
}
iXCray..
7
您正在寻找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%);
}
没有黑匣子:
.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%);
}
1> iXCray..:
您正在寻找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%);
}