css实现倾斜色板效果代码

代码语言:html

所属分类:布局界面

代码描述:css实现倾斜色板效果代码

代码标签: css 倾斜 色板

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


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

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  

  
<style>
@import "//repo.bfw.wiki/bfwrepo/css/open-props.css" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

@layer design.system, demo.support;

@layer demo {
  .swatchset {
    display: flex;
    transform: skew(-45deg);
  }
  
  .swatch {
    block-size: var(--size-5);
    aspect-ratio: var(--ratio-ultrawide);
  }
}

@layer demo.support {
  body {
    display: grid;
    place-content:.........完整代码请登录后点击上方下载按钮下载查看

网友评论0