英文:
CSS Grid with cross pattern
问题
我正在尝试创建一个带有十字图案的网格。
到目前为止一切都很好，但我在试图让交叉图案出现在 div 外部时遇到了困难。
在示例中，您可以看到外部的十字是“平的”，我希望它们与内部的完全相同（即完整的十字）。
编辑：我的意思是“平”的是它们不是完整的十字。它们要么是角落，要么是半个十字。
有人有什么想法吗？
我的代码编辑器链接：
https://codepen.io/twohundred/pen/OJoObXw
<div class="container">
<div class="grid">
<div><div></div></div>
<div><div></div></div>
<!-- ...（省略部分div）... -->
</div>
</div>
* { box-sizing: border-box; }
body {
background-color: red;
color: white;
font-size: 1rem;
}
.container {
height: 100%;
margin: 0 auto;
padding: 1.5em;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 101px;
}
.grid > div {
position: relative;
}
/* Bottom right */
.grid > div:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
display: block;
border: 1px solid white;
border-top: 0;
border-left: 0;
width: 1rem;
height: 1rem;
}
.grid > div:before {
content: '';
position: absolute;
top: -1px;
left: -1px;
display: block;
border: 1px solid white;
border-bottom: 0;
border-right: 0;
width: 1rem;
height: 1rem;
}
.grid > div > div {
height: calc(100% - 1rem);
margin: 0.5rem;
}
.grid > div:nth-child(5n - 4) > div:before {
content: '';
position: absolute;
bottom: 0;
left: -1px;
display: block;
border: 1px solid white;
border-top: 0;
border-right: 0;
width: 1rem;
height: 1rem;
}
.grid > div:nth-child(5n - 5) > div:after {
content: '';
position: absolute;
top: -1px;
right: 0;
display: block;
border: 1px solid white;
border-bottom: 0;
border-left: 0;
width: 1rem;
height: 1rem;
}
/* Top row top right */
.grid > div:nth-child(-n + 5) >div:after {
content: '';
position: absolute;
top: -1px;
right: 0;
display: block;
border: 1px solid white;
border-bottom: 0;
border-left: 0;
width: 1rem;
height: 1rem;
}
.grid > div:nth-last-child(-n + 4) > div:before {
content: '';
position: absolute;
bottom: 0;
left: -1px;
display: block;
border: 1px solid white;
border-top: 0;
border-right: 0;
width: 1rem;
height: 1rem;
}
英文:
I'm trying to make a grid with a cross pattern.
So far so good, but I'm struggeling to get the crosses on the outside of the div.
In the example you can see the outside crosses are "flat", I'd like to have them exact the same as on the inside (= a full cross).
edit: By flat i mean they are not a full cross. Either they are a corner or half a cross.
Anyone has an idea?
My pen:
https://codepen.io/twohundred/pen/OJoObXw
<div class="container">
<div class="grid">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</div>
</div>
* { box-sizing: border-box; }
body {
background-color: red;
color: white;
font-size: 1rem;
}
.container {
height: 100%;
margin: 0 auto;
padding: 1.5em;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 101px;
}
.grid > div {
position: relative;
}
/* Bottom right */
.grid > div:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
display: block;
border: 1px solid white;
border-top: 0;
border-left: 0;
width: 1rem;
height: 1rem;
}
.grid > div:before {
content: '';
position: absolute;
top: -1px;
left: -1px;
display: block;
border: 1px solid white;
border-bottom: 0;
border-right: 0;
width: 1rem;
height: 1rem;
}
.grid > div > div {
height: calc(100% - 1rem);
margin: 0.5rem;
}
.grid > div:nth-child(5n - 4) > div:before {
content: '';
position: absolute;
bottom: 0;
left: -1px;
display: block;
border: 1px solid white;
border-top: 0;
border-right: 0;
width: 1rem;
height: 1rem;
}
.grid > div:nth-child(5n - 5) > div:after {
content: '';
position: absolute;
top: -1px;
right: 0;
display: block;
border: 1px solid white;
border-bottom: 0;
border-left: 0;
width: 1rem;
height: 1rem;
}
/* Top row top right */
.grid > div:nth-child(-n + 5) >div:after {
content: '';
position: absolute;
top: -1px;
right: 0;
display: block;
border: 1px solid white;
border-bottom: 0;
border-left: 0;
width: 1rem;
height: 1rem;
}
.grid > div:nth-last-child(-n + 4) > div:before {
content: '';
position: absolute;
bottom: 0;
left: -1px;
display: block;
border: 1px solid white;
border-top: 0;
border-right: 0;
width: 1rem;
height: 1rem;
}
答案1
得分: 1
我会使用一个伪元素和渐变来制作它。关键是要让所有伪元素之间有重叠，并不要忘记考虑网格上的间隙，以便进行简单的计算。
body {
background-color: red;
}
.container {
padding: 2em;
}
.grid {
--w: 25px; /* 线条的宽度 */
--s: 1px; /* 线条的厚度 */
--c: #fff;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 100px;
gap: var(--s);
}
.grid > * {
position: relative;
}
.grid > *:before {
content: "";
position: absolute;
pointer-events: none;
inset: calc((var(--s) + var(--w))/-2);
background:
conic-gradient(at var(--s) var(--w), #0000 75%, var(--c) 0)
calc((var(--w) - var(--s))/2) 0,
conic-gradient(at var(--w) var(--s), #0000 75%, var(--c) 0)
0 calc((var(--w) - var(--s))/2);
background-size: calc(100% - var(--w)) calc(100% - var(--w));
}
<div class="container">
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
英文:
I would make it using one pseudo element and gradients. The trick is to have an overlap between all the pseudo element and don't forget to consider the gap on the grid to make the calculation easy.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background-color: red;
}
.container {
padding: 2em;
}
.grid {
--w: 25px; /* width of the line */
--s: 1px; /* thickness of the line */
--c: #fff;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 100px;
gap: var(--s);
}
.grid > * {
position: relative;
}
.grid > *:before {
content:"";
position: absolute;
pointer-events: none;
inset: calc((var(--s) + var(--w))/-2);
background:
conic-gradient(at var(--s) var(--w),#0000 75%,var(--c) 0)
calc((var(--w) - var(--s))/2) 0,
conic-gradient(at var(--w) var(--s),#0000 75%,var(--c) 0)
0 calc((var(--w) - var(--s))/2);
background-size: calc(100% - var(--w)) calc(100% - var(--w));
}
<!-- language: lang-html -->
<div class="container">
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论