圆形左上角[重复]

Question

我正在尝试使用 js svg 库制作一个只有左上角圆角的矩形。我在它的文档中找到了这个例子：

script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>
<script>
    var draw = SVG().addTo('#graphix').size(300, 300);
    var rect = draw.rect(300, 300).attr({ fill: '#f06' });
    rect.radius(100);
   
    //rect

  //end
</script>

它绕过所有的角落。是否可以使用此库仅舍入左上角或右上角？或者我应该使用什么作为替代品？我真的无法在与我的帖子相关的上一个问题中得到它。解决方案根本行不通。我尝试在此处使用问题svg / d3.js rounded corner on one corner of a rectangle 圆角中的一些示例，但这些示例是圆角整个右侧，而不是仅针对一个角，例如右上角/左上角。对我来说主要的问题是我对不同的角落有不同的半径。

Answer 1

你可以制作一个 div 来代替 SVG，然后使用border-radius 对其进行四舍五入。

<div style='width:100px;height:100px;background-color:red;border:1px solid black;border-top-left-radius:15px;border-top-right-radius:15px;'></div>

您只需更改我添加的数字即可更改边框半径、背景颜色、宽度、高度等。