英文:
How to create a triangular grid using html and css
问题
如何创建像下面的图片一样的网格？我正在尝试制作一个可以用于我的项目的网格，但我真的不确定应该如何解决这个问题。
有人可以帮帮我吗？
<div class="grid">
<div class="triangle"></div>
<div class="row2">
<div class="triangle2"></div>
<div class="triangle3"></div>
<div class="triangle2"></div>
</div>
<!-- 根据需要添加更多三角形 -->
</div>
.grid {
display: flex;
flex-wrap: wrap;
}
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
margin: 10px;
}
.triangle2 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
margin: 10px;
}
英文:
How can I create a grid like the image below? I am trying to make a grid that can be used for my project but I am really unsure of how I should go about this problem.
Can somebody please help me?
<div class="grid">
<div class="triangle"></div>
<div class="row2">
<div class="triangle2"></div>
<div class="triangle3"></div>
<div class="triangle2"></div>
</div>
<!-- Add more triangles as needed -->
</div>
.grid {
display: flex;
flex-wrap: wrap;
}
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
margin: 10px;
}
.triangle2 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
margin: 10px;
}
答案1
得分: 4
使用 clip-path 可以创建所需的三角形，并使用负的左右 margin 将它们并排放置。
- 指向上的三角形：
clip-path: polygon(50% 0%, 0% 100%, 100% 100%) - 指向下的三角形：
clip-path: polygon(50% 100%, 0% 0%, 100% 0%) - 负边距：-1 x 三角形宽度的1/4
请注意：当需要边框时，之前建议的 SVG 解决方案可能是更好的选择，因为 clip-path 也会裁剪边框。
注意：确保在代码段中将鼠标悬停在三角形上。
英文:
With clip-path you can the create triangles you need and use a negative left and right margin to put them side by side.
- triangle pointing up:
clip-path: polygon(50% 0%, 0% 100%, 100% 100%) - triangle pointing down:
clip-path: polygon(50% 100%, 0% 0%, 100% 0%) - negative margin: -1 x 1/4th of the width of a triangle
Beware: when you need borders, the previously adviced SVG solutions may be a better choice as clip-path clips borders as well.
Note: make sure to hover the triangles in the snippet.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
/* Grid setup */
.grid { display: flex; flex-direction: column; justify-content: center; }
.row { display: flex; justify-content: center; }
.row > * { display: grid; place-items: center }
/* Triangle setup */
.grid { --triangle-size: calc(12.5vw + 1rem); /* y=mx+b for points p1(160,36) p2(1920,256) */ }
.row > :nth-child(odd) { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background-color: LemonChiffon } /* up */
.row > :nth-child(even) { clip-path: polygon(50% 100%, 0% 0%, 100% 0%); background-color: LightBlue } /* Down */
.row > * {
width : var(--triangle-size);
height: var(--triangle-size);
margin: 0 calc(-1 * var(--triangle-size)/4);
}
/* Action */
.row > :hover { background-color: tomato }
<!-- language: lang-html -->
<div class="grid">
<div class="row">
<div>1</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论