具有线性渐变和半径的顶部边框

Question

我尝试创建一个具有线性渐变和半径的唯一顶部边框。我做了顶部边框，但我无法执行半径。这个可以做吗？

如果我的代码不好，请自由地使其变得更好:)

这是我的代码：

HTML

<div class="grid-area grid-area-4"><p>Some text</p></div>

CSS

.grid-area{
background-color: hsl(227, 47%, 96%); 
text-align: center;
padding: 20px 0;
cursor: pointer;
border-radius: 5px;
}

.grid-area-4{
grid-area: grid-area-4;
border-style: solid;
border-image: linear-gradient(to right, hsl(37, 97%, 70%) , hsl(329, 70%, 58%)) 1/3px;
border-image-slice: 100 0 0;
}

我想在顶部边框上有带有线性渐变的弯角

Answer 1

你的意思是你想在顶部放置一个渐变，而圆角不被渐变切断？那么这可能是一种方法

.grid-area{
    position:relative;
    background-color: hsl(227, 47%, 96%); 
    text-align: center;
    padding: 20px 0;
    cursor: pointer;
    border-radius: 5px;
}
.grid-area-4 {
    grid-area: grid-area-4;
    background-image: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
    background-position:top;
    background-size:100% 5px;
    background-repeat:no-repeat;
}