我正在尝试让多个CSS形状彼此拥抱。谷歌搜索时,我发现的唯一建议是我应该使用内联块。但是,我似乎无法按照我的意愿让它工作。虽然它允许彼此相邻的形状拥抱,但它似乎不允许形状拥抱它们上方和下方的元素。
示例:如果我想用三角形制作dimond:
.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 class="r_tleft"></div>
<div class="r_tright"></div>
<div class="r_bleft"></div>
<div class="r_bright"></div>
&#13;
结果如下所示:
◢◣◥◤
如果我要添加休息时间,就像这样......
<div class="r_tleft"></div><div class="r_tright"></div>
<br>
<div class="r_bleft"></div><div class="r_bright"></div>
.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;
相反,这发生了:
◢◣
◥◤
如所暗示的那样,这两个人都没有达到预期的效果。
答案 0 :(得分:0)
如果您将每个项目包裹在div中,您将获得所需的效果。然后你可以在包装器div上使用css来使它们尽可能地关闭。
.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;
答案 1 :(得分:0)
你几乎拥有它,但考虑到使元素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>