Fatal编程技术网

Javascript 如何挤压钻石

javascript html css

Javascript 如何挤压钻石,javascript,html,css,Javascript,Html,Css,我试图制作一个钻石网格，但我希望钻石的高度小于宽度 var x=8； 变量y=7； 变量网格=函数（行、列）{ var sum=“”； 对于（变量y=0；y

我试图制作一个钻石网格，但我希望钻石的高度小于宽度

var x=8；
变量y=7；
变量网格=函数（行、列）{
var sum=“”；
对于（变量y=0；y<（行）；y++）{
总和+=“”
对于（变量i=0；i

.diamond{
左缘：1%；
利润底部：1%；
宽度：100%；
}
.迪亚{
浮动：左；
保证金权利：2.5%；
宽度：3%；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
身高：17.4%；
宽度：5.50%；
}
div{
显示：块；
}
.电网{
位置：相对位置；
溢出：隐藏；
浮动：左；
利润上限：-1%；
宽度：100%；
垫底：100%；
边框：1px实心；
/*宽度：107%*/
身高：-2%；
}
.电网img{
位置：绝对位置；
前-25%；
左-25%；
宽度：150%；
身高：150%；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}




您可以尝试以下页面的“菱形窄条”示例：

也许你可以稍微修改一下以满足你的需要


<html>
    <style>
        #diamond-flat {
            position: relative;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-right: 70px solid blue;
        }

        #diamond-flat:after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            border: 50px solid transparent;
            border-left: 70px solid blue;
            top: -50px;
            left: 70px
        }
    </style>
<body>
    <div id="diamond-flat">
    </div>
</body>

</html>




#菱形平面{
位置：相对位置；
宽度：0；
身高：0；
边框：50px实心透明；
右边框：70px纯蓝色；
}
#钻石公寓：之后{
内容：''；
宽度：0；
身高：0；
位置：绝对位置；
边框：50px实心透明；
左边框：70px纯蓝色；
顶部：-50px；
左：70像素
}

您可以使用父元素
.diamond
上的CSS transform属性来缩放Y轴



var x=8；
变量y=7；
变量网格=函数（行、列）{
var sum=“”；
对于（变量y=0；y

.diamond{
变换：scaleY（0.8）；
左缘：1%；
利润底部：1%；
宽度：100%；
}
.迪亚{
浮动：左；
保证金权利：2.5%；
宽度：3%；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
身高：17.4%；
宽度：5.50%；
边缘底部：-21px；
}
div{
显示：块；
}
.电网{
位置：相对位置；
溢出：隐藏；
浮动：左；
利润上限：-1%；
宽度：100%；
垫底：100%；
边框：1px实心；
/*宽度：107%*/
身高：-2%；
}
.电网img{
位置：绝对位置；
前-25%；
左-25%；
宽度：150%；
身高：150%；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
-webkit变换：旋转（45度）；
变换：旋转（45度）；

}
我很好奇，为什么要在动态创建的元素上强制使用ID，而不仅仅是使用类？我以后会需要ID，我不知道网格会有问题，只是忘了删除它们