次の CSS を使用して、非常に単純な 2D 川の形状を生成しています。
.river-left {
width: 100px;
height: 50px;
border: solid 20px rgb(0, 140, 255);
border-color: rgb(0, 140, 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, 140, 255);
border-color: rgb(0, 140, 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 に切り替えるかもしれないと思います (これはアイデアの簡単なモックアップにすぎませんが) が、この不一致を解決する方法を知っておくとよいでしょう。