html – 在纯css中制作一定的梯形形状_html-js-css

概述假设我有两个div,如下所示(精美).我已经看了 The Shapes of CSS,但我还没有发现下图中的黄色形状究竟是如何制作的.是否有可能以与上面链接中描述的内容类似的方式制作黄色形状. 或者甚至,现在我们谈论的主题,下面的图片将描述理想的情况.这可能在CSS中使用,还是使用其他一些工具？ (请注意,图片中的曲线并不理想,但是标准的贝塞尔曲线可能会有不同的高度吗？) 对于问题的第二部分,您可假设我有两个div,如下所示(精美).我已经看了 The Shapes of 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/

但请注意,对剪辑路径的支持目前非常有限.

@L_301_4@

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 >    <div >      <div ></div>      <div ></div>      <div ></div>    </div>    <div >      <div ></div>      <div ></div>      <div ></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,13.327,0C9.346,0v33.113v1.622l14.966,0.68	c29.252,54.509,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,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,0 43%);  clip-path: polygon(0 0,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%,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 >    <div >      <div ></div>      <div ></div>      <div ></div>    </div>    <div >      <div ></div>      <div ></div>      <div ></div>    </div>  </div></body></HTML>

总结

以上是内存溢出为你收集整理的html – 在纯css中制作一定的梯形形状全部内容，希望文章能够帮你解决html – 在纯css中制作一定的梯形形状所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1087032.html

html – 在纯css中制作一定的梯形形状

发表评论

评论列表（0条）