CSS 网格和弹性框不起作用 - 无法移动项目？
CSS grid and flex box not working - cannot move items?
我希望我的颜色从颜色-select（绿色框）的左上角开始，由于某种原因，最后一项不在屏幕上。如何让它从左上角开始，所有颜色都包含在 color-select（绿色框）部分？
此外，当网站在移动设备视图中时，如何使每个项目（颜色）变小并排成六个？ （我有 12 种颜色，但不能在这里全部显示）。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 90px 1fr 1fr 80px 1fr 1fr 1fr 100px;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"header header header header header"
"main main main main main"
"main main main main main"
"carousel carousel carousel carousel carousel"
"color-select color-select color-select color-select color-select"
"about about about about about"
"social social social social social"
"footer footer footer footer footer";
}
@media only screen and (max-width: 600px) {
main.main {
margin-left: 10px;
margin-right: 10px;
}
}
.header {
grid-area: header;
/* background-color: red; */
margin: 10px;
}
.logo {
position: fixed;
display: inline-block;
left: 5px;
top: 15px;
}
.navbar {
position: fixed;
display: inline-block;
top: 47px;
right: 1px;
font-family: "Khula", sans-serif;
line-height: 38px;
font-weight: 400;
font-size: 16px;
}
.nav-link {
margin: 18px;
color: #222222;
text-decoration: none;
}
.main {
grid-area: main;
background-color: #f8f8f8;
margin: 10px;
margin-top: 20px;
padding-top: 20px;
margin-left: 100px;
margin-right: 100px;
display: flex;
text-align: center;
}
.color-select {
grid-area: color-select;
background-color: green;
margin: 10px;
}
.about {
grid-area: about;
background-color: pink;
margin: 10px;
}
.social {
grid-area: social;
background-color: magenta;
margin: 10px;
}
.footer {
grid-area: footer;
background-color: teal;
margin: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
width: 100%;
height: auto;
}
#product-svg {
position: absolute; /*change from relative*/
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
mix-blend-mode: multiply;
width: 65%;
height: auto;
}
path {
fill: #cccccc;
}
#background-image {
position: relative;
z-index: 1;
width: 65%;
height: auto;
}
.colors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
.color {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
margin: 10px;
}
.red1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff0000;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.red1:before,
.red1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red1:before {
bottom: 100%;
border-bottom: 5.77px solid #ff2600;
}
.red1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff2600;
}
.red2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #660000;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.red2:before,
.red2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red2:before {
bottom: 100%;
border-bottom: 5.77px solid #660000;
}
.red2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #660000;
}
.red3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #990000;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.red3:before,
.red3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red3:before {
bottom: 100%;
border-bottom: 5.77px solid #990000;
}
.red3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #990000;
}
.red4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cc0000;
margin: 5.77px 0;
top: 49.5px;
left: 80px;
}
.red4:before,
.red4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red4:before {
bottom: 100%;
border-bottom: 5.77px solid #cc0000;
}
.red4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cc0000;
}
.red5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff6666;
margin: 5.77px 0;
top: 15px;
left: 90px;
}
.red5:before,
.red5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red5:before {
bottom: 100%;
border-bottom: 5.77px solid #ff6666;
}
.red5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff6666;
}
.red6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff9999;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.red6:before,
.red6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red6:before {
bottom: 100%;
border-bottom: 5.77px solid #ff9999;
}
.red6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff9999;
}
.red7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffcccc;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.red7:before,
.red7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffcccc;
}
.red7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffcccc;
}
.orange1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff8000;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.orange1:before,
.orange1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange1:before {
bottom: 100%;
border-bottom: 5.77px solid #ff8000;
}
.orange1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff8000;
}
.orange2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #663300;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.orange2:before,
.orange2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange2:before {
bottom: 100%;
border-bottom: 5.77px solid #663300;
}
.orange2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #663300;
}
.orange3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #994d00;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.orange3:before,
.orange3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange3:before {
bottom: 100%;
border-bottom: 5.77px solid #994d00;
}
.orange3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #994d00;
}
.orange4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cc6600;
margin: 5.77px 0;
top: 49px;
left: 80px;
}
.orange4:before,
.orange4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange4:before {
bottom: 100%;
border-bottom: 5.77px solid #cc6600;
}
.orange4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cc6600;
}
.orange5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffcc33;
margin: 5.77px 0;
top: 15px;
left: 90px;
}
.orange5:before,
.orange5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange5:before {
bottom: 100%;
border-bottom: 5.77px solid #ffcc33;
}
.orange5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffcc33;
}
.orange6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffd966;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.orange6:before,
.orange6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange6:before {
bottom: 100%;
border-bottom: 5.77px solid #ffd966;
}
.orange6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffd966;
}
.orange7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffe699;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.orange7:before,
.orange7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffe699;
}
.orange7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffe699;
}
.yellow1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff00;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.yellow1:before,
.yellow1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow1:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff00;
}
.yellow1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff00;
}
.yellow2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #666600;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.yellow2:before,
.yellow2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow2:before {
bottom: 100%;
border-bottom: 5.77px solid #666600;
}
.yellow2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #666600;
}
.yellow3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #999900;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.yellow3:before,
.yellow3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow3:before {
bottom: 100%;
border-bottom: 5.77px solid #999900;
}
.yellow3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #999900;
}
.yellow4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cccc00;
margin: 5.77px 0;
top: 49px;
left: 80px;
}
.yellow4:before,
.yellow4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow4:before {
bottom: 100%;
border-bottom: 5.77px solid #cccc00;
}
.yellow4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cccc00;
}
.yellow5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff66;
margin: 5.77px 0;
top: 15px;
left: 90px;
}
.yellow5:before,
.yellow5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow5:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff66;
}
.yellow5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff66;
}
.yellow6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff99;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.yellow6:before,
.yellow6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow6:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff99;
}
.yellow6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff99;
}
.yellow7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffffcc;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.yellow7:before,
.yellow7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffffcc;
}
.yellow7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffffcc;
}
.green1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #00ff00;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.green1:before,
.green1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green1:before {
bottom: 100%;
border-bottom: 5.77px solid #00ff00;
}
.green1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #00ff00;
}
.green2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #006600;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.green2:before,
.green2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green2:before {
bottom: 100%;
border-bottom: 5.77px solid #006600;
}
.green2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #006600;
}
.green3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #009900;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.green3:before,
.green3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green3:before {
bottom: 100%;
border-bottom: 5.77px solid #009900;
}
.green3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #009900;
}
.green4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #00cc00;
margin: 5.77px 0;
top: 49px;
left: 80px;
}
.green4:before,
.green4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green4:before {
bottom: 100%;
border-bottom: 5.77px solid #00cc00;
}
.green4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #00cc00;
}
.green5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #66ff66;
margin: 5.77px 0;
top: 16px;
left: 90px;
}
.green5:before,
.green5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green5:before {
bottom: 100%;
border-bottom: 5.77px solid #66ff66;
}
.green5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #66ff66;
}
.green6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #99ff99;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.green6:before,
.green6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green6:before {
bottom: 100%;
border-bottom: 5.77px solid #99ff99;
}
.green6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #99ff99;
}
.green7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #b3ffb3;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.green7:before,
.green7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green7:before {
bottom: 100%;
border-bottom: 5.77px solid #b3ffb3;
}
.green7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #b3ffb3;
}
.blue1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #0040ff;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.blue1:before,
.blue1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue1:before {
bottom: 100%;
border-bottom: 5.77px solid #0040ff;
}
.blue1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #0040ff;
}
.blue2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #001a66;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.blue2:before,
.blue2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue2:before {
bottom: 100%;
border-bottom: 5.77px solid #001a66;
}
.blue2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #001a66;
}
.blue3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #002699;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.blue3:before,
.blue3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue3:before {
bottom: 100%;
border-bottom: 5.77px solid #002699;
}
.blue3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #002699;
}
.blue4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #0033cc;
margin: 5.77px 0;
top: 49px;
left: 80px;
}
.blue4:before,
.blue4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue4:before {
bottom: 100%;
border-bottom: 5.77px solid #0033cc;
}
.blue4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #0033cc;
}
.blue5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #3366ff;
margin: 5.77px 0;
top: 16px;
left: 90px;
}
.blue5:before,
.blue5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue5:before {
bottom: 100%;
border-bottom: 5.77px solid #3366ff;
}
.blue5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #3366ff;
}
.blue6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #668cff;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.blue6:before,
.blue6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue6:before {
bottom: 100%;
border-bottom: 5.77px solid #668cff;
}
.blue6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #668cff;
}
.blue7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #99b3ff;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.blue7:before,
.blue7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue7:before {
bottom: 100%;
border-bottom: 5.77px solid #99b3ff;
}
.blue7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #99b3ff;
}
<body>
<div class="grid-container">
<header class="header">
<img class="logo" src="logo.png" alt="">
<nav class="navbar">
<a href=about.html class="nav-link">About</a>
<a href=contact.html class="nav-link">Contact</a>
</nav>
</header>
<main class="main">
</main>
<section class="color-select">
<div class="colors">
<div class="red">
<div class="color red1" data-hex="#ff0000"></div>
<div class="color red2" data-hex="#660000"></div>
<div class="color red3" data-hex="#990000"></div>
<div class="color red4" data-hex="#cc0000"></div>
<div class="color red5" data-hex="#ff6666"></div>
<div class="color red6" data-hex="#ff9999"></div>
<div class="color red7" data-hex="#ffcccc"></div>
</div>
<div class="orange">
<div class="color orange1" data-hex="#ff8000"></div>
<div class="color orange2" data-hex="#663300"></div>
<div class="color orange3" data-hex="#994d00"></div>
<div class="color orange4" data-hex="#cc6600"></div>
<div class="color orange5" data-hex="#ffcc33"></div>
<div class="color orange6" data-hex="#ffd966"></div>
<div class="color orange7" data-hex="#ffe699"></div>
</div>
<div class="yellow">
<div class="color yellow1" data-hex="#ffff00"></div>
<div class="color yellow2" data-hex="#666600"></div>
<div class="color yellow3" data-hex="#999900"></div>
<div class="color yellow4" data-hex="#cccc00"></div>
<div class="color yellow5" data-hex="#ffff66"></div>
<div class="color yellow6" data-hex="#ffff99"></div>
<div class="color yellow7" data-hex="#ffffcc"></div>
</div>
<div class="green">
<div class="color green1" data-hex="#00ff00"></div>
<div class="color green2" data-hex="#006600"></div>
<div class="color green3" data-hex="#009900"></div>
<div class="color green4" data-hex="#00cc00"></div>
<div class="color green5" data-hex="#66ff66"></div>
<div class="color green6" data-hex="#99ff99"></div>
<div class="color green7" data-hex="#b3ffb3"></div>
</div>
<div class="blue">
<div class="color blue1" data-hex="#0040ff"></div>
<div class="color blue2" data-hex="#001a66"></div>
<div class="color blue3" data-hex="#002699"></div>
<div class="color blue4" data-hex="#0033cc"></div>
<div class="color blue5" data-hex="#3366ff"></div>
<div class="color blue6" data-hex="#668cff"></div>
<div class="color blue7" data-hex="#99b3ff"></div>
</div>
</div>
</section>
<section class="about">e</section>
<section class="social">f</section>
<footer class="footer">g</footer>
</div>
</body>
对于现在的浏览器来说，你涉及的内容太多 css。
你的第一个错误是使用 space-between 然后偏移你的六边形大约 100px ...最后一个将在容器外平均 100px。
将 space-between 变为 space-around，因此第一个和最后一个元素不会粘在边缘上。
减少 100px 的偏移量 120px 变为 20px 和 80px 变为 -20px，这样它仍然更接近其原始区域。
您代码中的示例（我删除了不必要的部分并将重复的样式移动到一组规则中）
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.color-select {
grid-area: color-select;
background-color: green;
margin: 10px;
}
.colors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
}
.color {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
}
.red1 {
position: relative;
width: 20px;
height: 11.55px;
background: #ff0000;
margin: 5.77px 0;
top: 101px;
}
.color:before,
.color:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red1:before {
bottom: 100%;
border-bottom: 5.77px solid #ff2600;
}
.red1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff2600;
}
.red2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #660000;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.red2:before {
bottom: 100%;
border-bottom: 5.77px solid #660000;
}
.red2:after {
top: 100%;
border-top: 5.77px solid #660000;
}
.red3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #990000;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.red3:before {
bottom: 100%;
border-bottom: 5.77px solid #990000;
}
.red3:after {
top: 100%;
border-top: 5.77px solid #990000;
}
.red4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cc0000;
margin: 5.77px 0;
top: 49.5px;
left: -20px;
}
.red4:before {
bottom: 100%;
border-bottom: 5.77px solid #cc0000;
}
.red4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cc0000;
}
.red5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff6666;
margin: 5.77px 0;
top: 15px;
left: -10px;
}
.red5:before {
bottom: 100%;
border-bottom: 5.77px solid #ff6666;
}
.red5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff6666;
}
.red6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff9999;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.red6:before {
bottom: 100%;
border-bottom: 5.77px solid #ff9999;
}
.red6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff9999;
}
.red7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffcccc;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.red7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffcccc;
}
.red7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffcccc;
}
.orange1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff8000;
margin: 5.77px 0;
top: 101px;
left: .2px;
}
.orange1:before {
bottom: 100%;
border-bottom: 5.77px solid #ff8000;
}
.orange1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff8000;
}
.orange2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #663300;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.orange2:before {
bottom: 100%;
border-bottom: 5.77px solid #663300;
}
.orange2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #663300;
}
.orange3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #994d00;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.orange3:before {
bottom: 100%;
border-bottom: 5.77px solid #994d00;
}
.orange3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #994d00;
}
.orange4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cc6600;
margin: 5.77px 0;
top: 49px;
left: -20px;
}
.orange4:before {
bottom: 100%;
border-bottom: 5.77px solid #cc6600;
}
.orange4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cc6600;
}
.orange5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffcc33;
margin: 5.77px 0;
top: 15px;
left: -10px;
}
.orange5:before {
bottom: 100%;
border-bottom: 5.77px solid #ffcc33;
}
.orange5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffcc33;
}
.orange6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffd966;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.orange6:before {
bottom: 100%;
border-bottom: 5.77px solid #ffd966;
}
.orange6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffd966;
}
.orange7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffe699;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.orange7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffe699;
}
.orange7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffe699;
}
.yellow1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff00;
margin: 5.77px 0;
top: 101px;
left: .2px;
}
.yellow1:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff00;
}
.yellow1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff00;
}
.yellow2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #666600;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.yellow2:before {
bottom: 100%;
border-bottom: 5.77px solid #666600;
}
.yellow2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #666600;
}
.yellow3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #999900;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.yellow3:before {
bottom: 100%;
border-bottom: 5.77px solid #999900;
}
.yellow3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #999900;
}
.yellow4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cccc00;
margin: 5.77px 0;
top: 49px;
left: -20px;
}
.yellow4:before {
bottom: 100%;
border-bottom: 5.77px solid #cccc00;
}
.yellow4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cccc00;
}
.yellow5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff66;
margin: 5.77px 0;
top: 15px;
left: -10px;
}
.yellow5:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff66;
}
.yellow5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff66;
}
.yellow6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff99;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.yellow6:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff99;
}
.yellow6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff99;
}
.yellow7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffffcc;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.yellow7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffffcc;
}
.yellow7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffffcc;
}
.green1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #00ff00;
margin: 5.77px 0;
top: 101px;
left: 0.2px;
}
.green1:before {
bottom: 100%;
border-bottom: 5.77px solid #00ff00;
}
.green1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #00ff00;
}
.green2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #006600;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.green2:before {
bottom: 100%;
border-bottom: 5.77px solid #006600;
}
.green2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #006600;
}
.green3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #009900;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.green3:before {
bottom: 100%;
border-bottom: 5.77px solid #009900;
}
.green3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #009900;
}
.green4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #00cc00;
margin: 5.77px 0;
top: 49px;
left: -20px;
}
.green4:before {
bottom: 100%;
border-bottom: 5.77px solid #00cc00;
}
.green4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #00cc00;
}
.green5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #66ff66;
margin: 5.77px 0;
top: 16px;
left: -10px;
}
.green5:before {
bottom: 100%;
border-bottom: 5.77px solid #66ff66;
}
.green5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #66ff66;
}
.green6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #99ff99;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.green6:before {
bottom: 100%;
border-bottom: 5.77px solid #99ff99;
}
.green6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #99ff99;
}
.green7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #b3ffb3;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.green7:before {
bottom: 100%;
border-bottom: 5.77px solid #b3ffb3;
}
.green7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #b3ffb3;
}
.blue1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #0040ff;
margin: 5.77px 0;
top: 101px;
left: 0.2px;
}
.blue1:before {
bottom: 100%;
border-bottom: 5.77px solid #0040ff;
}
.blue1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #0040ff;
}
.blue2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #001a66;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.blue2:before {
bottom: 100%;
border-bottom: 5.77px solid #001a66;
}
.blue2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #001a66;
}
.blue3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #002699;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.blue3:before {
bottom: 100%;
border-bottom: 5.77px solid #002699;
}
.blue3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #002699;
}
.blue4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #0033cc;
margin: 5.77px 0;
top: 49px;
left: -20px;
}
.blue4:before {
bottom: 100%;
border-bottom: 5.77px solid #0033cc;
}
.blue4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #0033cc;
}
.blue5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #3366ff;
margin: 5.77px 0;
top: 16px;
left: -10px;
}
.blue5:before {
bottom: 100%;
border-bottom: 5.77px solid #3366ff;
}
.blue5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #3366ff;
}
.blue6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #668cff;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.blue6:before {
bottom: 100%;
border-bottom: 5.77px solid #668cff;
}
.blue6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #668cff;
}
.blue7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #99b3ff;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.blue7:before {
bottom: 100%;
border-bottom: 5.77px solid #99b3ff;
}
.blue7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #99b3ff;
}
<section class="color-select">
<div class="colors">
<div class="red">
<div class="color red1" data-hex="#ff0000"></div>
<div class="color red2" data-hex="#660000"></div>
<div class="color red3" data-hex="#990000"></div>
<div class="color red4" data-hex="#cc0000"></div>
<div class="color red5" data-hex="#ff6666"></div>
<div class="color red6" data-hex="#ff9999"></div>
<div class="color red7" data-hex="#ffcccc"></div>
</div>
<div class="orange">
<div class="color orange1" data-hex="#ff8000"></div>
<div class="color orange2" data-hex="#663300"></div>
<div class="color orange3" data-hex="#994d00"></div>
<div class="color orange4" data-hex="#cc6600"></div>
<div class="color orange5" data-hex="#ffcc33"></div>
<div class="color orange6" data-hex="#ffd966"></div>
<div class="color orange7" data-hex="#ffe699"></div>
</div>
<div class="yellow">
<div class="color yellow1" data-hex="#ffff00"></div>
<div class="color yellow2" data-hex="#666600"></div>
<div class="color yellow3" data-hex="#999900"></div>
<div class="color yellow4" data-hex="#cccc00"></div>
<div class="color yellow5" data-hex="#ffff66"></div>
<div class="color yellow6" data-hex="#ffff99"></div>
<div class="color yellow7" data-hex="#ffffcc"></div>
</div>
<div class="green">
<div class="color green1" data-hex="#00ff00"></div>
<div class="color green2" data-hex="#006600"></div>
<div class="color green3" data-hex="#009900"></div>
<div class="color green4" data-hex="#00cc00"></div>
<div class="color green5" data-hex="#66ff66"></div>
<div class="color green6" data-hex="#99ff99"></div>
<div class="color green7" data-hex="#b3ffb3"></div>
</div>
<div class="blue">
<div class="color blue1" data-hex="#0040ff"></div>
<div class="color blue2" data-hex="#001a66"></div>
<div class="color blue3" data-hex="#002699"></div>
<div class="color blue4" data-hex="#0033cc"></div>
<div class="color blue5" data-hex="#3366ff"></div>
<div class="color blue6" data-hex="#668cff"></div>
<div class="color blue7" data-hex="#99b3ff"></div>
</div>
</div>
</section>
如今，浏览器理解 clip-path 和 CSS var() 来缩短您的代码，包装 flex 将需要稍微推动第一个元素来绘制您的线条：2 - 3 - 2，证明 -内容和负边距将完成十六进制布局。
可能重新考虑的想法：
[data-test] {
display:flex;
flex-wrap:wrap;/* You can let it wrap so it doesnt shrink or set offscreen children */
justify-content:space-between;
/* justify-content:space-around;keep off from edges */
align-items:start;
/* align-items:center; whatever else you need here */
background:linear-gradient(to top,transparent 50%, rgba(0,0,0,0.1) 50%) green;/* remove the gradient, it only shows the center while you need to set your alignments */
min-height:120px;/* whatever you need here */
}
[data-test] span.color {/* the hex mother boxes */
flex-shrink:0 ;/* needed if parent is not a wrapping flexbox */
display:flex;
flex-wrap:wrap;
justify-content:center; /* set in center */
width:60px;/* max = 3 x 20px */
padding-bottom:9px;/* 3 lines : 3 x 6 / 2 = 9 */
}
[data-test] span.color span{
height:23px;
width:20px;
background:var(--color);/* colors injected here from the var set in the style attribute */
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);/* cut your shape off */
margin-bottom:-6px; /* overlapp the lines */
}
[data-test] span.color span:first-child{
margin-left:1px;/* 3x20px + px of margin on the first allows only to elements, centered from justify-content set on flex parent */
}
.color-select {
background-color: green;
margin: 10px;
}
<p>Colors stored inside a var() from a style attribute that can be used from the css file.</p>
<div data-test>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<!-- and so on with next colors -->
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
</div>
<p>You can add more of course , no worries if it can wrap</p>
<div data-test>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<!-- and so on with next colors -->
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
</div>
我希望我的颜色从颜色-select（绿色框）的左上角开始，由于某种原因，最后一项不在屏幕上。如何让它从左上角开始，所有颜色都包含在 color-select（绿色框）部分？
此外，当网站在移动设备视图中时，如何使每个项目（颜色）变小并排成六个？ （我有 12 种颜色，但不能在这里全部显示）。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 90px 1fr 1fr 80px 1fr 1fr 1fr 100px;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"header header header header header"
"main main main main main"
"main main main main main"
"carousel carousel carousel carousel carousel"
"color-select color-select color-select color-select color-select"
"about about about about about"
"social social social social social"
"footer footer footer footer footer";
}
@media only screen and (max-width: 600px) {
main.main {
margin-left: 10px;
margin-right: 10px;
}
}
.header {
grid-area: header;
/* background-color: red; */
margin: 10px;
}
.logo {
position: fixed;
display: inline-block;
left: 5px;
top: 15px;
}
.navbar {
position: fixed;
display: inline-block;
top: 47px;
right: 1px;
font-family: "Khula", sans-serif;
line-height: 38px;
font-weight: 400;
font-size: 16px;
}
.nav-link {
margin: 18px;
color: #222222;
text-decoration: none;
}
.main {
grid-area: main;
background-color: #f8f8f8;
margin: 10px;
margin-top: 20px;
padding-top: 20px;
margin-left: 100px;
margin-right: 100px;
display: flex;
text-align: center;
}
.color-select {
grid-area: color-select;
background-color: green;
margin: 10px;
}
.about {
grid-area: about;
background-color: pink;
margin: 10px;
}
.social {
grid-area: social;
background-color: magenta;
margin: 10px;
}
.footer {
grid-area: footer;
background-color: teal;
margin: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
width: 100%;
height: auto;
}
#product-svg {
position: absolute; /*change from relative*/
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
mix-blend-mode: multiply;
width: 65%;
height: auto;
}
path {
fill: #cccccc;
}
#background-image {
position: relative;
z-index: 1;
width: 65%;
height: auto;
}
.colors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
.color {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
margin: 10px;
}
.red1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff0000;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.red1:before,
.red1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red1:before {
bottom: 100%;
border-bottom: 5.77px solid #ff2600;
}
.red1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff2600;
}
.red2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #660000;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.red2:before,
.red2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red2:before {
bottom: 100%;
border-bottom: 5.77px solid #660000;
}
.red2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #660000;
}
.red3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #990000;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.red3:before,
.red3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red3:before {
bottom: 100%;
border-bottom: 5.77px solid #990000;
}
.red3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #990000;
}
.red4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cc0000;
margin: 5.77px 0;
top: 49.5px;
left: 80px;
}
.red4:before,
.red4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red4:before {
bottom: 100%;
border-bottom: 5.77px solid #cc0000;
}
.red4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cc0000;
}
.red5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff6666;
margin: 5.77px 0;
top: 15px;
left: 90px;
}
.red5:before,
.red5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red5:before {
bottom: 100%;
border-bottom: 5.77px solid #ff6666;
}
.red5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff6666;
}
.red6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff9999;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.red6:before,
.red6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red6:before {
bottom: 100%;
border-bottom: 5.77px solid #ff9999;
}
.red6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff9999;
}
.red7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffcccc;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.red7:before,
.red7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffcccc;
}
.red7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffcccc;
}
.orange1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff8000;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.orange1:before,
.orange1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange1:before {
bottom: 100%;
border-bottom: 5.77px solid #ff8000;
}
.orange1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff8000;
}
.orange2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #663300;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.orange2:before,
.orange2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange2:before {
bottom: 100%;
border-bottom: 5.77px solid #663300;
}
.orange2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #663300;
}
.orange3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #994d00;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.orange3:before,
.orange3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange3:before {
bottom: 100%;
border-bottom: 5.77px solid #994d00;
}
.orange3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #994d00;
}
.orange4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cc6600;
margin: 5.77px 0;
top: 49px;
left: 80px;
}
.orange4:before,
.orange4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange4:before {
bottom: 100%;
border-bottom: 5.77px solid #cc6600;
}
.orange4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cc6600;
}
.orange5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffcc33;
margin: 5.77px 0;
top: 15px;
left: 90px;
}
.orange5:before,
.orange5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange5:before {
bottom: 100%;
border-bottom: 5.77px solid #ffcc33;
}
.orange5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffcc33;
}
.orange6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffd966;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.orange6:before,
.orange6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange6:before {
bottom: 100%;
border-bottom: 5.77px solid #ffd966;
}
.orange6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffd966;
}
.orange7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffe699;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.orange7:before,
.orange7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.orange7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffe699;
}
.orange7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffe699;
}
.yellow1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff00;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.yellow1:before,
.yellow1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow1:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff00;
}
.yellow1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff00;
}
.yellow2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #666600;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.yellow2:before,
.yellow2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow2:before {
bottom: 100%;
border-bottom: 5.77px solid #666600;
}
.yellow2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #666600;
}
.yellow3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #999900;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.yellow3:before,
.yellow3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow3:before {
bottom: 100%;
border-bottom: 5.77px solid #999900;
}
.yellow3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #999900;
}
.yellow4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cccc00;
margin: 5.77px 0;
top: 49px;
left: 80px;
}
.yellow4:before,
.yellow4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow4:before {
bottom: 100%;
border-bottom: 5.77px solid #cccc00;
}
.yellow4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cccc00;
}
.yellow5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff66;
margin: 5.77px 0;
top: 15px;
left: 90px;
}
.yellow5:before,
.yellow5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow5:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff66;
}
.yellow5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff66;
}
.yellow6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff99;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.yellow6:before,
.yellow6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow6:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff99;
}
.yellow6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff99;
}
.yellow7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffffcc;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.yellow7:before,
.yellow7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.yellow7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffffcc;
}
.yellow7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffffcc;
}
.green1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #00ff00;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.green1:before,
.green1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green1:before {
bottom: 100%;
border-bottom: 5.77px solid #00ff00;
}
.green1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #00ff00;
}
.green2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #006600;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.green2:before,
.green2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green2:before {
bottom: 100%;
border-bottom: 5.77px solid #006600;
}
.green2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #006600;
}
.green3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #009900;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.green3:before,
.green3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green3:before {
bottom: 100%;
border-bottom: 5.77px solid #009900;
}
.green3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #009900;
}
.green4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #00cc00;
margin: 5.77px 0;
top: 49px;
left: 80px;
}
.green4:before,
.green4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green4:before {
bottom: 100%;
border-bottom: 5.77px solid #00cc00;
}
.green4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #00cc00;
}
.green5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #66ff66;
margin: 5.77px 0;
top: 16px;
left: 90px;
}
.green5:before,
.green5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green5:before {
bottom: 100%;
border-bottom: 5.77px solid #66ff66;
}
.green5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #66ff66;
}
.green6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #99ff99;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.green6:before,
.green6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green6:before {
bottom: 100%;
border-bottom: 5.77px solid #99ff99;
}
.green6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #99ff99;
}
.green7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #b3ffb3;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.green7:before,
.green7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.green7:before {
bottom: 100%;
border-bottom: 5.77px solid #b3ffb3;
}
.green7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #b3ffb3;
}
.blue1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #0040ff;
margin: 5.77px 0;
top: 101px;
left: 100.2px;
}
.blue1:before,
.blue1:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue1:before {
bottom: 100%;
border-bottom: 5.77px solid #0040ff;
}
.blue1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #0040ff;
}
.blue2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #001a66;
margin: 5.77px 0;
top: 100px;
left: 110px;
}
.blue2:before,
.blue2:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue2:before {
bottom: 100%;
border-bottom: 5.77px solid #001a66;
}
.blue2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #001a66;
}
.blue3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #002699;
margin: 5.77px 0;
top: 82.8px;
left: 90px;
}
.blue3:before,
.blue3:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue3:before {
bottom: 100%;
border-bottom: 5.77px solid #002699;
}
.blue3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #002699;
}
.blue4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #0033cc;
margin: 5.77px 0;
top: 49px;
left: 80px;
}
.blue4:before,
.blue4:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue4:before {
bottom: 100%;
border-bottom: 5.77px solid #0033cc;
}
.blue4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #0033cc;
}
.blue5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #3366ff;
margin: 5.77px 0;
top: 16px;
left: 90px;
}
.blue5:before,
.blue5:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue5:before {
bottom: 100%;
border-bottom: 5.77px solid #3366ff;
}
.blue5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #3366ff;
}
.blue6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #668cff;
margin: 5.77px 0;
bottom: 2px;
left: 110px;
}
.blue6:before,
.blue6:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue6:before {
bottom: 100%;
border-bottom: 5.77px solid #668cff;
}
.blue6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #668cff;
}
.blue7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #99b3ff;
margin: 5.77px 0;
bottom: 3px;
left: 120px;
}
.blue7:before,
.blue7:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.blue7:before {
bottom: 100%;
border-bottom: 5.77px solid #99b3ff;
}
.blue7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #99b3ff;
}
<body>
<div class="grid-container">
<header class="header">
<img class="logo" src="logo.png" alt="">
<nav class="navbar">
<a href=about.html class="nav-link">About</a>
<a href=contact.html class="nav-link">Contact</a>
</nav>
</header>
<main class="main">
</main>
<section class="color-select">
<div class="colors">
<div class="red">
<div class="color red1" data-hex="#ff0000"></div>
<div class="color red2" data-hex="#660000"></div>
<div class="color red3" data-hex="#990000"></div>
<div class="color red4" data-hex="#cc0000"></div>
<div class="color red5" data-hex="#ff6666"></div>
<div class="color red6" data-hex="#ff9999"></div>
<div class="color red7" data-hex="#ffcccc"></div>
</div>
<div class="orange">
<div class="color orange1" data-hex="#ff8000"></div>
<div class="color orange2" data-hex="#663300"></div>
<div class="color orange3" data-hex="#994d00"></div>
<div class="color orange4" data-hex="#cc6600"></div>
<div class="color orange5" data-hex="#ffcc33"></div>
<div class="color orange6" data-hex="#ffd966"></div>
<div class="color orange7" data-hex="#ffe699"></div>
</div>
<div class="yellow">
<div class="color yellow1" data-hex="#ffff00"></div>
<div class="color yellow2" data-hex="#666600"></div>
<div class="color yellow3" data-hex="#999900"></div>
<div class="color yellow4" data-hex="#cccc00"></div>
<div class="color yellow5" data-hex="#ffff66"></div>
<div class="color yellow6" data-hex="#ffff99"></div>
<div class="color yellow7" data-hex="#ffffcc"></div>
</div>
<div class="green">
<div class="color green1" data-hex="#00ff00"></div>
<div class="color green2" data-hex="#006600"></div>
<div class="color green3" data-hex="#009900"></div>
<div class="color green4" data-hex="#00cc00"></div>
<div class="color green5" data-hex="#66ff66"></div>
<div class="color green6" data-hex="#99ff99"></div>
<div class="color green7" data-hex="#b3ffb3"></div>
</div>
<div class="blue">
<div class="color blue1" data-hex="#0040ff"></div>
<div class="color blue2" data-hex="#001a66"></div>
<div class="color blue3" data-hex="#002699"></div>
<div class="color blue4" data-hex="#0033cc"></div>
<div class="color blue5" data-hex="#3366ff"></div>
<div class="color blue6" data-hex="#668cff"></div>
<div class="color blue7" data-hex="#99b3ff"></div>
</div>
</div>
</section>
<section class="about">e</section>
<section class="social">f</section>
<footer class="footer">g</footer>
</div>
</body>
对于现在的浏览器来说，你涉及的内容太多 css。
你的第一个错误是使用 space-between 然后偏移你的六边形大约 100px ...最后一个将在容器外平均 100px。
将 space-between 变为 space-around，因此第一个和最后一个元素不会粘在边缘上。
减少 100px 的偏移量 120px 变为 20px 和 80px 变为 -20px，这样它仍然更接近其原始区域。
您代码中的示例（我删除了不必要的部分并将重复的样式移动到一组规则中）
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.color-select {
grid-area: color-select;
background-color: green;
margin: 10px;
}
.colors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
}
.color {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
}
.red1 {
position: relative;
width: 20px;
height: 11.55px;
background: #ff0000;
margin: 5.77px 0;
top: 101px;
}
.color:before,
.color:after {
content: "";
position: absolute;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.red1:before {
bottom: 100%;
border-bottom: 5.77px solid #ff2600;
}
.red1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff2600;
}
.red2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #660000;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.red2:before {
bottom: 100%;
border-bottom: 5.77px solid #660000;
}
.red2:after {
top: 100%;
border-top: 5.77px solid #660000;
}
.red3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #990000;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.red3:before {
bottom: 100%;
border-bottom: 5.77px solid #990000;
}
.red3:after {
top: 100%;
border-top: 5.77px solid #990000;
}
.red4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cc0000;
margin: 5.77px 0;
top: 49.5px;
left: -20px;
}
.red4:before {
bottom: 100%;
border-bottom: 5.77px solid #cc0000;
}
.red4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cc0000;
}
.red5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff6666;
margin: 5.77px 0;
top: 15px;
left: -10px;
}
.red5:before {
bottom: 100%;
border-bottom: 5.77px solid #ff6666;
}
.red5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff6666;
}
.red6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff9999;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.red6:before {
bottom: 100%;
border-bottom: 5.77px solid #ff9999;
}
.red6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff9999;
}
.red7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffcccc;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.red7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffcccc;
}
.red7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffcccc;
}
.orange1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ff8000;
margin: 5.77px 0;
top: 101px;
left: .2px;
}
.orange1:before {
bottom: 100%;
border-bottom: 5.77px solid #ff8000;
}
.orange1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ff8000;
}
.orange2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #663300;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.orange2:before {
bottom: 100%;
border-bottom: 5.77px solid #663300;
}
.orange2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #663300;
}
.orange3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #994d00;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.orange3:before {
bottom: 100%;
border-bottom: 5.77px solid #994d00;
}
.orange3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #994d00;
}
.orange4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cc6600;
margin: 5.77px 0;
top: 49px;
left: -20px;
}
.orange4:before {
bottom: 100%;
border-bottom: 5.77px solid #cc6600;
}
.orange4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cc6600;
}
.orange5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffcc33;
margin: 5.77px 0;
top: 15px;
left: -10px;
}
.orange5:before {
bottom: 100%;
border-bottom: 5.77px solid #ffcc33;
}
.orange5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffcc33;
}
.orange6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffd966;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.orange6:before {
bottom: 100%;
border-bottom: 5.77px solid #ffd966;
}
.orange6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffd966;
}
.orange7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffe699;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.orange7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffe699;
}
.orange7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffe699;
}
.yellow1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff00;
margin: 5.77px 0;
top: 101px;
left: .2px;
}
.yellow1:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff00;
}
.yellow1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff00;
}
.yellow2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #666600;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.yellow2:before {
bottom: 100%;
border-bottom: 5.77px solid #666600;
}
.yellow2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #666600;
}
.yellow3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #999900;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.yellow3:before {
bottom: 100%;
border-bottom: 5.77px solid #999900;
}
.yellow3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #999900;
}
.yellow4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #cccc00;
margin: 5.77px 0;
top: 49px;
left: -20px;
}
.yellow4:before {
bottom: 100%;
border-bottom: 5.77px solid #cccc00;
}
.yellow4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #cccc00;
}
.yellow5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff66;
margin: 5.77px 0;
top: 15px;
left: -10px;
}
.yellow5:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff66;
}
.yellow5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff66;
}
.yellow6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffff99;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.yellow6:before {
bottom: 100%;
border-bottom: 5.77px solid #ffff99;
}
.yellow6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffff99;
}
.yellow7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #ffffcc;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.yellow7:before {
bottom: 100%;
border-bottom: 5.77px solid #ffffcc;
}
.yellow7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #ffffcc;
}
.green1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #00ff00;
margin: 5.77px 0;
top: 101px;
left: 0.2px;
}
.green1:before {
bottom: 100%;
border-bottom: 5.77px solid #00ff00;
}
.green1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #00ff00;
}
.green2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #006600;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.green2:before {
bottom: 100%;
border-bottom: 5.77px solid #006600;
}
.green2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #006600;
}
.green3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #009900;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.green3:before {
bottom: 100%;
border-bottom: 5.77px solid #009900;
}
.green3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #009900;
}
.green4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #00cc00;
margin: 5.77px 0;
top: 49px;
left: -20px;
}
.green4:before {
bottom: 100%;
border-bottom: 5.77px solid #00cc00;
}
.green4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #00cc00;
}
.green5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #66ff66;
margin: 5.77px 0;
top: 16px;
left: -10px;
}
.green5:before {
bottom: 100%;
border-bottom: 5.77px solid #66ff66;
}
.green5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #66ff66;
}
.green6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #99ff99;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.green6:before {
bottom: 100%;
border-bottom: 5.77px solid #99ff99;
}
.green6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #99ff99;
}
.green7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #b3ffb3;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.green7:before {
bottom: 100%;
border-bottom: 5.77px solid #b3ffb3;
}
.green7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #b3ffb3;
}
.blue1 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #0040ff;
margin: 5.77px 0;
top: 101px;
left: 0.2px;
}
.blue1:before {
bottom: 100%;
border-bottom: 5.77px solid #0040ff;
}
.blue1:after {
top: 100%;
width: 0;
border-top: 5.77px solid #0040ff;
}
.blue2 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #001a66;
margin: 5.77px 0;
top: 100px;
left: 10px;
}
.blue2:before {
bottom: 100%;
border-bottom: 5.77px solid #001a66;
}
.blue2:after {
top: 100%;
width: 0;
border-top: 5.77px solid #001a66;
}
.blue3 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #002699;
margin: 5.77px 0;
top: 82.8px;
left: -10px;
}
.blue3:before {
bottom: 100%;
border-bottom: 5.77px solid #002699;
}
.blue3:after {
top: 100%;
width: 0;
border-top: 5.77px solid #002699;
}
.blue4 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #0033cc;
margin: 5.77px 0;
top: 49px;
left: -20px;
}
.blue4:before {
bottom: 100%;
border-bottom: 5.77px solid #0033cc;
}
.blue4:after {
top: 100%;
width: 0;
border-top: 5.77px solid #0033cc;
}
.blue5 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #3366ff;
margin: 5.77px 0;
top: 16px;
left: -10px;
}
.blue5:before {
bottom: 100%;
border-bottom: 5.77px solid #3366ff;
}
.blue5:after {
top: 100%;
width: 0;
border-top: 5.77px solid #3366ff;
}
.blue6 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #668cff;
margin: 5.77px 0;
bottom: 2px;
left: 10px;
}
.blue6:before {
bottom: 100%;
border-bottom: 5.77px solid #668cff;
}
.blue6:after {
top: 100%;
width: 0;
border-top: 5.77px solid #668cff;
}
.blue7 {
position: relative;
width: 20px;
height: 11.55px;
background-color: #99b3ff;
margin: 5.77px 0;
bottom: 3px;
left: 20px;
}
.blue7:before {
bottom: 100%;
border-bottom: 5.77px solid #99b3ff;
}
.blue7:after {
top: 100%;
width: 0;
border-top: 5.77px solid #99b3ff;
}
<section class="color-select">
<div class="colors">
<div class="red">
<div class="color red1" data-hex="#ff0000"></div>
<div class="color red2" data-hex="#660000"></div>
<div class="color red3" data-hex="#990000"></div>
<div class="color red4" data-hex="#cc0000"></div>
<div class="color red5" data-hex="#ff6666"></div>
<div class="color red6" data-hex="#ff9999"></div>
<div class="color red7" data-hex="#ffcccc"></div>
</div>
<div class="orange">
<div class="color orange1" data-hex="#ff8000"></div>
<div class="color orange2" data-hex="#663300"></div>
<div class="color orange3" data-hex="#994d00"></div>
<div class="color orange4" data-hex="#cc6600"></div>
<div class="color orange5" data-hex="#ffcc33"></div>
<div class="color orange6" data-hex="#ffd966"></div>
<div class="color orange7" data-hex="#ffe699"></div>
</div>
<div class="yellow">
<div class="color yellow1" data-hex="#ffff00"></div>
<div class="color yellow2" data-hex="#666600"></div>
<div class="color yellow3" data-hex="#999900"></div>
<div class="color yellow4" data-hex="#cccc00"></div>
<div class="color yellow5" data-hex="#ffff66"></div>
<div class="color yellow6" data-hex="#ffff99"></div>
<div class="color yellow7" data-hex="#ffffcc"></div>
</div>
<div class="green">
<div class="color green1" data-hex="#00ff00"></div>
<div class="color green2" data-hex="#006600"></div>
<div class="color green3" data-hex="#009900"></div>
<div class="color green4" data-hex="#00cc00"></div>
<div class="color green5" data-hex="#66ff66"></div>
<div class="color green6" data-hex="#99ff99"></div>
<div class="color green7" data-hex="#b3ffb3"></div>
</div>
<div class="blue">
<div class="color blue1" data-hex="#0040ff"></div>
<div class="color blue2" data-hex="#001a66"></div>
<div class="color blue3" data-hex="#002699"></div>
<div class="color blue4" data-hex="#0033cc"></div>
<div class="color blue5" data-hex="#3366ff"></div>
<div class="color blue6" data-hex="#668cff"></div>
<div class="color blue7" data-hex="#99b3ff"></div>
</div>
</div>
</section>
如今，浏览器理解 clip-path 和 CSS var() 来缩短您的代码，包装 flex 将需要稍微推动第一个元素来绘制您的线条：2 - 3 - 2，证明 -内容和负边距将完成十六进制布局。
可能重新考虑的想法：
[data-test] {
display:flex;
flex-wrap:wrap;/* You can let it wrap so it doesnt shrink or set offscreen children */
justify-content:space-between;
/* justify-content:space-around;keep off from edges */
align-items:start;
/* align-items:center; whatever else you need here */
background:linear-gradient(to top,transparent 50%, rgba(0,0,0,0.1) 50%) green;/* remove the gradient, it only shows the center while you need to set your alignments */
min-height:120px;/* whatever you need here */
}
[data-test] span.color {/* the hex mother boxes */
flex-shrink:0 ;/* needed if parent is not a wrapping flexbox */
display:flex;
flex-wrap:wrap;
justify-content:center; /* set in center */
width:60px;/* max = 3 x 20px */
padding-bottom:9px;/* 3 lines : 3 x 6 / 2 = 9 */
}
[data-test] span.color span{
height:23px;
width:20px;
background:var(--color);/* colors injected here from the var set in the style attribute */
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);/* cut your shape off */
margin-bottom:-6px; /* overlapp the lines */
}
[data-test] span.color span:first-child{
margin-left:1px;/* 3x20px + px of margin on the first allows only to elements, centered from justify-content set on flex parent */
}
.color-select {
background-color: green;
margin: 10px;
}
<p>Colors stored inside a var() from a style attribute that can be used from the css file.</p>
<div data-test>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<!-- and so on with next colors -->
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
</div>
<p>You can add more of course , no worries if it can wrap</p>
<div data-test>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<!-- and so on with next colors -->
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
<span class="color red">
<span style="--color: #ff0000 "></span>
<span style="--color: #660000 "></span>
<span style="--color: #990000 "></span>
<span style="--color: #cc0000 "></span>
<span style="--color: #ff6666 "></span>
<span style="--color: #ff9999 "></span>
<span style="--color: #ffcccc "></span>
</span>
<span class="color orange">
<span style="--color: #ff8000 "></span>
<span style="--color: #663300 "></span>
<span style="--color: #994d00 "></span>
<span style="--color: #cc6600 "></span>
<span style="--color: #ffcc33 "></span>
<span style="--color: #ffd966 "></span>
<span style="--color: #ffe699 "></span>
</span>
</div>