css打印去除顶部地址,使用CSS从div顶部“切掉”圆形

我正在尝试在CSS中创建以下布局。

这通常很容易做到，但是因为背景是一个图像(在我的图像中以渐变的形式说明)，我不能简单地在顶部添加一个绝对定位的div并为'cut away'着色。在过去的几个小时里，我一直在努力研究如何做到这一点。

我已经使用::before和::after伪选择器查找了一些示例，但无法确定如何将边框半径保持在主内容div(蓝色)上。

LINK 1

LINK 2

Some text content

.content {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border-radius: 20px;

background-color: blue;

height: 300px;

width: 400px;

padding: 20px;

}

.header {

position: relative;

top: -50px;

padding: 0 20px;

}

.header .right {

float: right;

}