css - 如何响应地旋转矩形的背景？

Question

我正在尝试创建以下背景，并想知道如何开始使用 CSS 制作这个形状。

我在想：

1. 主 div - 灰色背景

2. 次要 div - 一个旋转的矩形

   .outer {
       background: grey;
   }
   
   .outer .rect {
      position: absolute;
       text-align: center;
       top: -260px;
       left: -50px;
       transform: rotate(50deg);
       width: 500px;
       height: 500px;
       background: linear-gradient(#EFF0F4, #D1D1D6);
   }
   

问题是矩形没有响应，对于更大的屏幕，底部的矩形“箭头”形状不会在中间。

有没有办法让这些形状响应？

标签： css

Answer 1

多背景可以轻松做到这一点。Aconic-gradient作为具有透明部分的顶层，其下方是主渐变。

.box {
  width:300px;
  height:300px;
  background:
   conic-gradient(from -45deg at 50% 50%,#0000 0 90deg,grey 0),
   linear-gradient(red,blue);
}

<div class="box"></div>