div+css布局实现卡片图片右上角文字边角效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现卡片图片右上角文字边角效果代码
代码标签: div css 布局 卡片 图片 右上角 文字 边角
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; flex-wrap: wrap; gap: 1rem; background: rgb(2,0,36); margin: 0; padding: 1rem; } .card { display: grid; align-items: flex-start; width: 400px; height: 600px; } .card:nth-of-type(even) { height: 300px; } .image-wrap { display: flex; align-items: flex-start; width: 100%; height: 100%; grid-column-start: 1; grid-row-start: 1; filter: url('#goo'); } .image { width: 100%; height: 100%; background-image: url("//repo.bfw.wiki/random/400x700/景色"); background-position: center; background-repeat: no-reapeat; background-size: cover; clip-path: polygon( 0% 0%, calc(100% - var(--nameWidth)) 0%, calc(100% - var(--nameWidth)) var(--nameHeight), 100% var(--nameHeight), 100% 100%, 0% 100% ); } .card .name { display: inline; padding: 20px 30px; color: black; margin-left: auto; grid-column-start: 1; grid-row-start: 1; font-size: 20px; color: white; font-family: sans-serif; font-weight: bold; letter-spacing: 1px; transition: all 0.3s ease-in-out; } .card:hover .name { font-size: 24px; } /* This is just test for responsive */ @media (max-width: 767px) { .card .name { font-size: 14px; } } </style> </head> <body translate="no"> <div class="card"> <div class="image-wrap"> <div class="image"></div> </div> <div class="name">Lorem Ipsum</div> </div> <div class=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0