CSS 从角落渐变？

Question

关于如何制作角落渐变的任何想法？

使用偏移圆锥渐变似乎给了我一个不错的效果，但这并不是我想要的。

background-image: conic-gradient(#fff 45deg, #000 215deg, #fff 270deg);

这是我想要获得的效果的图片：

Answer 1

也许是两个渐变的组合：

 .box { width: 250px; aspect-ratio: 1; background: linear-gradient(red 20%, blue); position: relative; z-index: 0; }.box:before { content: ""; position: absolute; z-index: -1; inset: 0; background: inherit; /* use the same gradient */ transform: rotate(-90deg); /* rotate it */ clip-path: polygon(100% 0, 100% 100%, 0 100%); /* show only half of the element */ }

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