与css的平行四边形

-3

我想获得与Locnville网站上的背景相同的效果：http://locnville.com（倾斜的正方形或平行四边形，无论如何）。我可以用css获得平行四边形，因为有数千个示例但我无法获取同样的效果。谁能帮我这个？与css的平行四边形

我的CSS：

#parallelogram { 
    width: 150px; 
    height: 100px; 
    -webkit-transform: skew(20deg); 
     -moz-transform: skew(20deg); 
     -o-transform: skew(20deg); 
    background: red; 
}

来源

2014-01-29 Frederik Moller

到目前为止你有什么？ –

请显示您之前的操作尝试。您可以发布一些您迄今尝试过的代码，或者链接到您找到的某些网站。在问你这个问题之前，试着做一些研究。 – Joeytje50

检查我的编辑。 ...... –

我假设你正在寻找的是从左上角到右下角（或反之亦然）的倾斜角度，所以顶边是在一个角度？

~~您需要旋转你的箱子，并在这样的高度和宽度值基本上交换记得......~~

如果你需要你的内容是不被扭曲......

#parallelogram { 
    width: 200px; 
    position: relative; 
    padding: 1em; 
    margin-top: 1em; 

} 

#parallelogram:before { 
    content: ""; 
    -webkit-transform: translateY(-50%) skew(0,5deg); 
    -moz-transform: translateY(-50%) skew(0,5deg); 
     -o-transform: translateY(-50%) skew(0,5deg); 
    background-color:red; 
    position:absolute; 
    top:100%; 
    bottom:-200%; 
    left:0; 
    right:0; 
    z-index: -1; 
}

玩填充和定位会给你想要的形状（以及歪斜），并考虑到蒂姆在评论中的建议。

来源

2014-01-29 21:30:48 niaccurshi

转动是没有必要的。在这个问题的评论中看到我的小提琴。 –

坚持下来作为答案;） – niaccurshi

随意窃取我的任何意见，为您的写作。我只是处于浏览心情。现在太累了才能为真实做出贡献。 –

你需要让两个独立的div，用第二个div元素的顶部填充，以及与无重复和顶部位置属性背景图像指向您的倾斜方形图像（应该匹配第一个div背景颜色）。相当简单的CSS，尽管我会更进一步并使用a：before或：after和no image。

来源

2014-01-29 21:16:52 httpgio

与css的平行四边形

回答

相关问题