css实现图片不规则边框文字figure效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现图片不规则边框文字figure效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> figure { padding: 2rem; margin: 0; position: relative; color: #C4CBB7; } figure:before { content: ""; position: absolute; inset: 0; background: linear-gradient(currentColor 0 0) 0 -6px no-repeat; clip-path: polygon(0 0,calc(100% - 80px) 0,100% 80px,100% 100%,0 100%,0 0,5px 5px ,5px calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) calc(80px + 2.07px),calc(100% - 80px - 2.07px) 5px,5px 5px); } figure img { width: 250px; filter: grayscale(0.2); -webkit-mask: linear-gradient(-135deg,#0000 50px,#000 0); } figure figcaption { position: absolute; display: flex; gap: 1rem; inset: auto 0 0; translate: 0 calc(50% - 5px); font-family: sans-serif; font-size: 2.3rem; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0