<分区>
我正在尝试在 CSS 中创建以下布局。
这通常很容易做到，但是因为背景是一个图像(在我的图像中显示为渐变)，我不能简单地在顶部添加一个绝对定位的 div 并为“切掉”着色。在过去的几个小时里，我一直在努力想出如何做到这一点。
我已经查找了一些使用 ::before 和 ::after 伪选择器的示例，但是无法弄清楚如何在保持边框半径的同时做到这一点在主要内容 div(蓝色)上。
<div class="content">
<div class="header">
<a class="left" href="#">LINK 1</a>
<!--
Stuck with how to position this so it clips
<img class="logo" src="https://placehold.it/100x100">
-->
<a class="right" href="#">LINK 2</a>
</div>
<p>Some text content</p>
.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;
}