要实现一个四边形带圆弧的组件，可以使用HTML和CSS来完成。以下是一个简单的示例，展示了如何使用CSS的`border-radius`属性来创建一个带有圆弧的四边形，并通过props传递参数来控制圆弧的位置和颜色。
HTML结构
```html
```
CSS样式
```css
.rounded-quadrilateral {
position: relative；
width: 200px； /* 宽度 */
height: 100px； /* 高度 */
background-color: 2d6c90； /* 内边框颜色 */
overflow: hidden； /* 隐藏超出边界的部分 */
}
.arc {
position: absolute；
width: 100%； /* 与父容器宽度相同 */
height: 100%； /* 与父容器高度相同 */
background-color: var（--arc-color）； /* 圆弧颜色 */
border-radius: var（--arc-position）； /* 圆弧位置 */
}
.content {
position: relative；
z-index: 1； /* 确保内容在圆弧之上 */
}
```
解释
HTML结构
使用一个`div`作为外层容器，设置`--arc-position`和`--arc-color`自定义属性来控制圆弧的位置和颜色。
使用另一个`div`作为圆弧部分，通过`border-radius`属性实现圆弧效果。
使用一个`div`作为内容插槽，可以放置需要显示的内容。
CSS样式
`.rounded-quadrilateral`：设置外层容器的宽度、高度和背景颜色，并使用`overflow: hidden`来隐藏超出边界的部分。
`.arc`：使用绝对定位，宽度和高度与父容器相同，通过`border-radius`属性设置圆弧的位置和颜色。
`.content`：使用相对定位，确保内容在圆弧之上。
使用示例
你可以通过修改`--arc-position`和`--arc-color`自定义属性来改变圆弧的位置和颜色。例如，将`--arc-position`设置为`topLeft`和`bottomRight`，并将`--arc-color`设置为`ff0000`，可以实现一个左上角和右下角带圆弧的四边形。
这种方法简单且灵活，适用于大多数大屏项目。如果需要更复杂的动画效果，可以考虑使用CSS动画或JavaScript来实现。