合并两个具有相同渐变背景的div

如何解决合并两个具有相同渐变背景的div

我有一个矩形 div 和一个圆形图像。我想为这两个元素设置线性渐变背景（没有圆形边框），如下图所示：https://i.imgur.com/3tFgLvk.png

我尝试为圆设置线性渐变背景，使其靠近矩形而不引人注意。但它不适用于响应式（圆圈的边界很明显）。

我也尝试过搜索在线工具来创建圆形 clip-path，但我没有找到。

任何想法我该怎么做？

代码：

<div class="container">
    <div class="inner-text">
         <p></p> // and some other text inside the rectangle
    </div>
    <img class="image" src=""></img>
</div>

解决方法

使用蒙版创建形状：

[DEBUG] Copying file application.properties
[DEBUG] file application.properties has a filtered file extension
[DEBUG] Using 'ISO-8859-1' encoding to copy filtered resource 'application.properties'.
[DEBUG] copy (...)\src\test\resources\application.properties to (...)\target\test-classes\application.properties
[DEBUG] Copying file data-test.sql
[DEBUG] file data-test.sql has a filtered file extension
[DEBUG] Using 'UTF-8' encoding to copy filtered resource 'data-test.sql'.
[DEBUG] copy (...)\src\test\resources\data-test.sql to (...)\target\test-classes\data-test.sql
[DEBUG] Copying file schema-test.sql
[DEBUG] file schema-test.sql has a filtered file extension
[DEBUG] Using 'UTF-8' encoding to copy filtered resource 'schema-test.sql'.
[DEBUG] copy (...)\src\test\resources\schema-test.sql to (...)\target\test-classes\schema-test.sql

.box {
  height:100px;
  border-bottom:50px solid transparent; /* this is the space for your circle */
  background:linear-gradient(45deg,red,blue) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,radial-gradient(circle farthest-side,#fff 98%,transparent)  
     bottom 0 left 50px /* position of circle */
     /160px 160px /*size of circle  */
     no-repeat ;
}