纯css布局实现折叠矩形形状效果代码

代码语言:html

所属分类:布局界面

代码描述:纯css布局实现折叠矩形形状效果代码

代码标签: css 布局 折叠 矩形 形状

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

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

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

 
 
 
<style>
.folded {
  --r: 30px; /* control the folded part */
 
  width: 250px;
  aspect-ratio: 1.5;
  box-sizing: border-box;
  background:
    linear-gradient(90deg,#0007,#0000 calc(var(--r)/2) calc(100% - var(--r)/2),#0007.........完整代码请登录后点击上方下载按钮下载查看

网友评论0