如何让css元素拥抱其下方或上方的另一个元素？

Question

我正在尝试让多个CSS形状彼此拥抱。谷歌搜索时，我发现的唯一建议是我应该使用内联块。但是，我似乎无法按照我的意愿让它工作。虽然它允许彼此相邻的形状拥抱，但它似乎不允许形状拥抱它们上方和下方的元素。

示例：如果我想用三角形制作dimond：

＆＃13;

＆＃13;

.r_tleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent #007bff transparent;
  display: inline-block;
}

.r_tright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 0 25px;
  border-color: transparent transparent transparent #64C7CC;
  display: inline-block;
}

.r_bleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 0;
  border-color: transparent #64C7CC transparent transparent;
  display: inline-block;
}

.r_bright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 25px 0 0;
  border-color: #007bff transparent transparent transparent;
  display: inline-block;
}

＆＃13;

<div class="r_tleft"></div>
<div class="r_tright"></div>
<div class="r_bleft"></div>
<div class="r_bright"></div>

＆＃13;

＆＃13;

＆＃13;

结果如下所示：

◢◣◥◤

如果我要添加休息时间，就像这样......

<div class="r_tleft"></div><div class="r_tright"></div>
<br>
<div class="r_bleft"></div><div class="r_bright"></div>

＆＃13;

＆＃13;

.r_tleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent #007bff transparent;
  display: inline-block;
}

.r_tright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 0 25px;
  border-color: transparent transparent transparent #64C7CC;
  display: inline-block;
}

.r_bleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 0;
  border-color: transparent #64C7CC transparent transparent;
  display: inline-block;
}

.r_bright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 25px 0 0;
  border-color: #007bff transparent transparent transparent;
  display: inline-block;
}

＆＃13;

<div class="r_tleft"></div>
<div class="r_tright"></div>
<br>
<div class="r_bleft"></div>
<div class="r_bright"></div>

＆＃13;

＆＃13;

＆＃13;

相反，这发生了：

◢◣

◥◤

如所暗示的那样，这两个人都没有达到预期的效果。

Answer 1

如果您将每个项目包裹在div中，您将获得所需的效果。然后你可以在包装器div上使用css来使它们尽可能地关闭。

＆＃13;

＆＃13;

.r_tleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 25px;
    border-color: transparent transparent #007bff transparent;
    display:inline-block;
}

.r_tright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 0 25px;
    border-color: transparent transparent transparent #64C7CC;
    display:inline-block;
}

.r_bleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 0;
    border-color: transparent #64C7CC transparent transparent;
    display:inline-block;
}

.r_bright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 0;
    border-color: #007bff transparent transparent transparent;
    display:inline-block;
}

＆＃13;

 <div><div class="r_tleft"></div><div class="r_tright"></div></div>
    <div><div class="r_bleft"></div><div class="r_bright"></div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你几乎拥有它，但考虑到使元素inline-block使它们成为内联，所以行属性应用于它们。在您的情况下，删除调整容器块上line-height的垂直空间：

.r_tleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 25px;
    border-color: transparent transparent #007bff transparent;
    display:inline-block;
}

.r_tright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 0 25px;
    border-color: transparent transparent transparent #64C7CC;
    display:inline-block;
}

.r_bleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 0;
    border-color: transparent #64C7CC transparent transparent;
    display:inline-block;
}

.r_bright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 0;
    border-color: #007bff transparent transparent transparent;
    display:inline-block;
}

<div style="line-height: 0px">
  <div class="r_tleft"></div><div class="r_tright"></div>
  <br>
  <div class="r_bleft"></div><div class="r_bright"></div>
</div>