顶部和底部倾斜边框css

cnjp1d6j 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(117)

我如何使用CSS得到这种边框。顶部和底部有不同风格的边框，顶端有轻微的Angular
我想实现这个Result

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

css

来源：https://stackoverflow.com/questions/74778304/top-and-bottom-angled-borders-css

1条答案

按热度按时间

iyr7buue1#

使用渐变和背景：

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">

赞(0）回复(0）举报 2022-12-15

我来回答

顶部和底部倾斜边框css

1条答案

相关问题

热门标签

最新问答