在纯净的css中制作一定的梯形形状
kon*_*wka 6 html css css3 css-shapes
假设我有两个div,如下所示(精美).我已经看过CSS的形状,但我还没有发现下图中的黄色形状究竟是如何制作的.是否有可能以与上面链接中描述的内容类似的方式制作黄色形状.
或者甚至,现在我们谈论的主题,下面的图片将描述理想的情况.这可能在CSS中使用,还是使用其他一些工具？(请注意,图片中的曲线并不理想,但是标准的贝塞尔曲线可能会有不同的高度吗？)
对于问题的第二部分，您可以创建 SVG 剪辑路径，然后在 css 中引用 id。您可以在 HTML 底部看到 SVG。
-webkit-clip-path: url(#top-path);
clip-path: url(#top-path);
有关这两种方法的更多详细信息，请参见：https ://css-tricks.com/clipping-masking-css/
但请注意，目前的支持clip-path相当有限。
http://caniuse.com/#search=clip-path
-webkit-clip-path: url(#top-path);
clip-path: url(#top-path);
div {
float: left;
height: 100px;
width: 130px;
}
.holder {
position: relative;
}
.top {
width: 490px;
}
.bottom {
width: 490px;
position: absolute;
left: 0;
top: 35px;
}
.top-left {
background-color: aquamarine;
height: 35px;
}
.top-mid {
background-color: aquamarine;
width: 97px;
-webkit-clip-path: url(#top-path);
clip-path: url(#top-path);
}
.top-right {
background-color: aquamarine;
margin-top: 37px;
height: 53px;
}
.bottom-left {
background-color: aqua;
height: 34px;
}
.bottom-mid {
background-color: aqua;
width: 97px;
-webkit-clip-path: url(#bottom-path);
clip-path: url(#bottom-path);
}
.bottom-right {
background-color: aqua;
margin-top: 55px;
height: 45px;
}对于问题的第一部分，我们可以使用clip-path每个角坐标，并用逗号分隔。
-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Clip Path Shape</title>
</head>
<body>
<div class="holder">
<div class="top">
<div class="top-left"></div>
<div class="top-mid"></div>
<div class="top-right"></div>
</div>
<div class="bottom">
<div class="bottom-left"></div>
<div class="bottom-mid"></div>
<div class="bottom-right"></div>
</div>
<svg width="0" height="0">
<defs>
<clipPath id="bottom-path">
<path d="M14.966,0.68L0,0v33.113l14.966,0.68c29.252,2.041,55.102,70.509,76.068,70.503l6.245-0.32V54.864
l-6.245,0.32C70.068,55.189,44.218,2.721,14.966,0.68z" />
</clipPath>
</defs>
</svg>
<svg width="0" height="0">
<defs>
<clipPath id="top-path">
<path fill="#E30613" d="M88.763,36.612C59.511,33.053,45.639,0,13.327,0C9.346,0,0,0,0,0v33.113v1.622l14.966,0.68
c29.252,2.041,55.102,54.509,76.068,54.503l6.245-0.32V69.847V36.735L88.763,36.612z" />
</clipPath>
</defs>
</svg>
</div>
</body>
</html>-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
| 归档时间： |
|
| 查看次数： |
176 次 |
| 最近记录： |