div+css布局实现科技感不规则图片边框效果代码-html代码-BFW代码库

div+css布局实现科技感不规则图片边框效果代码

代码语言：html

代码描述：div+css布局实现科技感不规则图片边框效果代码，css重新定义了picture的边框及内容显示。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
@layer picture-border{
  picture {
    display: grid;
    width: 400px;
    aspect-ratio: 4/3;
    --bc: red; /*border-color*/
    --bs: 10px; /*border-size*/
    --cs: 20px; /*cut-size*/
    grid-template-rows: var(--cs) auto 1fr;
  }
  picture > figcaption {
    grid-area: 1/1/2/2;
    justify-self: end;
    min-width: 50%;
    min-height: calc(var(--cs) * 2 + var(--bs));

    display: grid;
    place-items: center;
    text-align: center;
    background-color: var(--bc);

    clip-path: polygon(
      var(--cs) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--cs)
    );
  }
  picture > img{
    grid-area: 2/1/4/2;
    width: 100%;
    height: 100%; 
    object-fit: cover;
    --em: .5;
    clip-path: polygon(
      calc(var(--cs) + var(--bs) * var(--em)) var(--bs), 
      calc(100% - var(--bs)) var(--bs),
      calc(100% - var(--bs)) calc(100% - v.........完整代码请登录后点击上方下载按钮下载查看