css布局实现一个钻石效果代码-html代码-BFW代码库

css布局实现一个钻石效果代码

代码语言：html

代码描述：css布局实现一个钻石效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700;900&display=swap');

:root{
    --primary-color-1: 	#f1f7fb;
    --primary-color-2: 	#d9ebf4;
    --primary-color-3: 	#d0e9f5;
    --primary-color-4: #cbe3f0;

}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}


html {
    /* This defines what 1rem is */
    font-size: 62.5%; /* 1 rem = 10px; 10px/16px = 62.5% */
}

body{
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    width: 100vw;
    height: 100vh;
    background-color: #77ACF1;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
}

.diamond{
    position: relative;
    width: 20rem;
    height: 20rem;
    transform: rotate(45deg);
}

span {
    font-size: 0;
    margin: 0;
    padding: 0;
}

span:nth-child(1){
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 5rem solid transparent;
    border-top: 5rem solid transparent;
    border-right: 5rem solid var(--primary-color-3);
    border-botto.........完整代码请登录后点击上方下载按钮下载查看