css实现图片不规则边框文字figure效果代码-html代码-BFW代码库

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;
.........完整代码请登录后点击上方下载按钮下载查看