I am using the following CSS to generate very simple 2d river shapes:
.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>In Firefox, the following HTML <div class="river-left"></div><div class="river-right"></div> then generates the shape you can see in the following image:
But in Chromium, it looks completely different (worse):
I tried using -webkit- properties to resolve this but I couldn't work out how to do so. I realise that the more conventional approach to making these shapes would be to use SVG. I think I may switch to SVG (even though this is only a quick mock-up of an idea either way) but it would be nice to know how to resolve this discrepancy.