问题描述
我使用以下 CSS 生成非常简单的二维河流形状:
.river-left {
width: 100px;
height: 50px;
border: solid 20px rgb(0,140,255);
border-color: rgb(0,255) transparent transparent transparent;
border-radius: 50%/100% 100% 0 0;
transform: rotate(270deg);
align-self:center;
margin-top: 19px;
}
.river-right {
width: 100px;
height: 50px;
border: solid 20px rgb(0,255) transparent transparent transparent;
border-radius: 50%/100% 100% 0 0;
transform: rotate(90deg);
align-self: center;
margin-top: 19px;
}
<div class="river-left"></div><div class="river-right"></div>
在 Firefox 中,以下 HTML <div class="river-left"></div><div class="river-right"></div>
然后生成您可以在下图中看到的形状:
但在 Chromium 中,它看起来完全不同(更糟):
我尝试使用 -webkit- 属性来解决这个问题,但我不知道如何去做。我意识到制作这些形状的更传统的方法是使用 SVG。我想我可能会改用 SVG(尽管这只是一个想法的快速模型),但很高兴知道如何解决这种差异。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)