想用css实现45°斜角地图中出现间隔无法消除

问前端UI的兄弟一个问题。我想用css布局一个45°斜角的地图，实现了两行的无缝对接，后面我想用这两行循环，但是出现了问题，中间出现了一片空白间隔，始终无法消除，请问有啥办法没？最好不要用绝对定位或者每行都要设置translate的办法，因为地图可能有几百行。效果图如下：
图片说明

文件的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .main{ width:520px; height:1000px; margin:0px auto; background:#CCCCCC;}
    /*.map_1{ width:150px; height:150px; background:#009933;transform: rotate(45deg); float:left;}*/
    /*.map_1{ width:85px; height:85px; background:#009933;transform: rotate(45deg) translate(30px); float:left;}*/
    .map_1{ width:80px; height:80px; background:#009933;transform: rotate(45deg) scale(0.72); float:left; }
    .map_2{ width:80px; height:80px; background:#CC9900;transform: rotate(45deg) scale(0.72) translate(-100%); -webkit-transform: translate(-100%); float:left;}
</style>
</head>

<body>
<div class="main">
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_1"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
    <div class="map_2"></div>
</div>
</body>
</html>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答

张天宇 2019-09-27 16:25

关注

这种好像最好用会计元素，非要div的话，
我知道一个可以通过外面包div设置margin可以实现，不过就是麻烦很多。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .main{ width:480px; height:1000px; margin: 40px auto; background:#CCCCCC;overflow: hidden;} /**/
    /*.map_1{ width:150px; height:150px; background:#009933;transform: rotate(45deg); float:left;}*/
    /*.map_1{ width:85px; height:85px; background:#009933;transform: rotate(45deg) translate(30px); float:left;}*/
    .map_1{ width:80px; height:80px; background:#009933;transform: rotate(45deg) scale(0.72);}
    .map_2{ width:80px; height:80px; background:#CC9900;transform: rotate(45deg) scale(0.72);}
    /*.green{ width: 480px;height: 80px; margin: -40px 0px 0px 0px;}*/
    .yellow{width: 560px;height: 80px; margin: -40px 0px 0px -40px;}
    .green .map_1{ float:left; margin: -40px 0px 0px 0px;}
    .yellow .map_2{ float:left;  margin: -40px 0px 0px 0px;}
    .tab{margin: -80px 0px 0px 0px;}
</style>
</head>

<body>
<div class="main">
    <div class="tab">
        <div class="green">
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
        </div>
        <div class="yellow">
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
        </div>
    </div>
    <div class="tab">
        <div class="green">
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
            <div class="map_1"></div>
        </div>
        <div class="yellow">
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
            <div class="map_2"></div>
        </div>
    </div>
    <!--重复tab-->
</div>
</body>
</html>

坐等更好的