在纯净的css中制作一定的梯形形状
[英]Make a certain trapezoidal shape in pure css
问题描述
假设我有两个div，如下所示（精美）。 我已经看过CSS的形状 ，但我还没有发现下图中的黄色形状究竟是如何制作的。 是否有可能以与上面链接中描述的内容类似的方式制作黄色形状。
或者甚至，现在我们谈论的主题，下面的图片将描述理想的情况。 这可能在CSS中使用，还是使用其他一些工具？ （请注意，图片中的曲线并不理想，但是标准的贝塞尔曲线可能会有不同的高度吗？）
2 个解决方案
解决方案1
3 已采纳 2016-10-16 09:54:53
对于问题的第二部分，您可以创建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
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; }
<!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>
对于问题的第一部分，我们可以使用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%);
div { float: left; height: 100px; width: 130px; } .holder { position: relative; } .top { width: 490px; } .bottom { width: 490px; position: absolute; left: 0; top: 43px; } .top-left { background-color: aquamarine; height: 43px; } .top-mid { background-color: aquamarine; -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); } .top-right { background-color: aquamarine; margin-top: 20px; height: 80px; } .bottom-left { background-color: aqua; height: 43px; } .bottom-mid { background-color: aqua; -webkit-clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%); clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%); } .bottom-right { background-color: aqua; margin-top: 43px; height: 57px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS 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> </div> </body> </html>
解决方案2
3 2016-10-16 09:56:57
这是纯css的第一个形状。 你需要使用perspective 。
.shape { display: flex; margin: 50px; } .red, .green { color: white; padding: 15px; box-sizing: border-box; } .green { background: green; position: relative; z-index: 2; width: 200px; height: 127px; margin-top: 45px; margin-left: -22px; } .red { width: 100px; background: red; height: 56px; z-index: 2; } .parent { position: relative; -webkit-perspective: 711px; perspective: 711px; margin-left: -30px; margin-top: 19px; } .el { width: 200px; -webkit-transform: rotateX(-27deg) rotateY(-40deg); transform: rotateX(-27deg) rotateY(-40deg); height: 65px; background: #FFF200; position: relative; perspective: 350px; -webkit-perspective: 350px; } .el:after { content: ''; position: absolute; left: 0; top: 100%; border-style: solid; border-width: 0 200px 70px 0; border-color: transparent #FFF200 transparent transparent; }
<div class="shape"> <div class="red">Div 1</div> <div class="parent"> <div class="el"></div> </div> <div class="green">Div 2</div> </div>
如何在纯HTML和CSS中制作此形状？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.