如何在css中将屏幕划分为这些菱形div? [英] How can I divide the screen to these diamond shaped divs in css?

查看：20
本文介绍了如何在css中将屏幕划分为这些菱形div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我希望我能达到的理想设计

预期结果

就我所知，这是将我的 div 堆叠在一起的想法，这样它们看起来就像我无法绕过的第一张图片

我的代码

我的代码

html

身体，html {宽度:100%；最大高度:100%；font-family: 'Montserrat', sans-serif;填充:5px；白颜色;}.正方形{宽度:100px；高度:100px；边距:20px；变换:旋转(45度)；显示:弹性；对齐内容:居中；对齐项目:居中；}.square .text{变换:旋转(-45度)；}.img-card{宽度:250px；}

任何帮助将不胜感激，

提前致谢

解决方案

我会考虑我在 我对六边形的回答中使用的想法网格.我将简单地调整形状以使用菱形而不是六边形

.container {--s: 150px;/* 尺寸  */--m: 4px;/* 空间 */字体大小:0；/* 禁用内联元素之间的默认空白 */}.container div {宽度:var(--s);边距:var(--m);高度:var(--s);显示:内联块；剪辑路径:多边形(50% 0%、100% 50%、50% 100%、0% 50%)；背景:粉红色；margin-bottom: calc(var(--m) + var(--s)/-2);文字对齐:居中；字体大小:25px；行高:calc(var(--s));}.container div:nth-child(odd) {背景:红色；}.container::before {内容: "";宽度: calc(var(--s)/2 + var(--m));向左飘浮;高度:100%；外型:重复线性梯度(透明 0 calc(var(--s) + 4*var(--m)),#fff 0 calc(var(--s) + 6*var(--m)));}.主要的 {显示:弹性；/* 额外的 flex 包装器会给我默认的拉伸对齐这将允许我在容器的子元素上使用 height:100%没有任何明确的高度！一个疯狂的黑客，我知道.. */}

<div class="容器"><div>文本
<div style="background:url(https://picsum.photos/id/1014/200/200)">文本

<div>文本

<div>文本

<div>文本

<div>文本

<div>文本

<div style="background:url(https://picsum.photos/id/1014/200/200)">文本

<div>文本

<div>文本

<div style="background:url(https://picsum.photos/id/107/200/200)">文本

<div>文本

<div>文本

<div>文本

<div>文本

<div>文本

<div>文本

<div>文本

<div>文本

this is the desired design I hope I can reach

desired outcome

and this is as far as I got, it's the idea of stacking my divs together so they look like the first picture that I can't wrap my head around

my code

my code

html


        <div
            class="container-fluid d-flex flex-wrap justify-content-between h-100 w-100"
        >
            <div class="square bg-info bg-gradient"><div class="text">hello1</div></div>
            <div class="square bg-dark bg-gradient"><div class="text">hello2</div></div>
            <div class="square bg-primary bg-gradient"><div class="text">hello3</div></div>
            <div class="square bg-secondary bg-gradient"><div class="text">hello4</div></div>
            <div class="square bg-success bg-gradient"><div class="text">hello5</div></div>
            <div class="square bg-danger bg-gradient"><div class="text">hello6</div></div>
            <div class="square bg-warning bg-gradient overflow-hidden"><div class="text">
                <img src="img/6.jpg"  class="img-card" alt="">
            </div></div>

//then I repeated the same divs over and over

        </div>

css


body,
html {
    width: 100%;
    max-height: 100%;
    font-family: 'Montserrat', sans-serif;
    padding: 5px;
    color: white;
}




.square{
    width: 100px;
    height: 100px;
    margin: 20px;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.square .text{
    transform: rotate(-45deg);

}

.img-card{
    width: 250px;
}

any help will be appreciated,

thanks in advance

解决方案

I will consider the idea I used in my answer for a hexagon grid. I will simply adjust the shape to use a rhombus instead of a hexagon

.container {
  --s: 150px;  /* size  */
  --m: 4px;    /* space */
  font-size: 0;  /* disable default white space between inline element */
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: var(--s);
  display: inline-block;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: pink;
  margin-bottom: calc(var(--m) + var(--s)/-2);
  text-align:center;
  font-size:25px;
  line-height: calc(var(--s));
}
.container div:nth-child(odd) {
  background:red;
}

.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 100%;
  shape-outside: 
   repeating-linear-gradient(
     transparent 0 calc(var(--s) + 4*var(--m)), 
     #fff        0 calc(var(--s) + 6*var(--m)));
}

.main {
  display:flex;
  /* the extra flex wrapper will give me the default stretch alignment 
    and this will allow me to use height:100% on child element of container
    without any explicit height!
    a crazy hack, I know .. */
}

<div class="main">
  <div class="container">
    <div> text </div>
    <div style="background:url(https://picsum.photos/id/1014/200/200)"> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div style="background:url(https://picsum.photos/id/1014/200/200)"> text </div>
    <div> text </div>
    <div> text </div>
    <div style="background:url(https://picsum.photos/id/107/200/200)"> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
  </div>
</div>

这篇关于如何在css中将屏幕划分为这些菱形div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆