顶部和底部的角度边界css

Question

如何使用CSS获得这种边框?顶部和底部有不同样式的边缘，顶端有小角度

我想做到这一点结果

border: 15px solid;
border-image: url(border.png) 30 / 15px / 0px stretch;

Answer 1

使用渐变和背景:

img {
padding: 20px 0; /* control the border size here */
--g: grey 30%,lightblue 0; /* control the coloration here */
background:
linear-gradient(-45deg,var(--g)) bottom,
linear-gradient(135deg,var(--g)) top;
background-size: 100% 50%;
background-repeat:no-repeat;
}

<img src="https://picsum.photos/id/1069/200/200">