-2
我在这方面很新颖，而且我按照自己想要的方式定位某些图像时遇到了一些问题。 这就是我想要的：钻石形状的三角形图像
a:link:
a:visited:
a:hover
.thumbnail {
border: 0 none;
box-shadow: none;
}
/*
Element width position calculated with:
(((1-((229/2)*x+(20*y))/1080)/2)+((229/2+20)/1080)*z)*100
x = number of triangles in row
y = number of spaces between triangles
z = triangle number from starting postion left -1
Vertical:
(((1-(844/1080))/2)+((196+20)/1080)*z)*100
*/
body {
background: url(Resources/forside_baggrund.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.Diamond {
width: 1080px;
height: 1080px;
margin: 0 auto;
position: relative;
background-color:transparent;
}
.Diamond img {
width: 229px;
height: 196px;
position:absolute;
}
.room {
width: 114.5px;
height: 131px;
position:absolute;
background-color:transparent;
left: 50%;
top: 36%;
}
.info {
width: 114.5px;
height: 131px;
position:absolute;
background-color:transparent;
left: 37.3%;
top: 56%;
}
.language {
width: 114.5px;
height: 131px;
position:absolute;
background-color:transparent;
left: 50%;
top: 51%;
}
.kursus {
width: 114.5px;
height: 131px;
position:absolute;
background-color:transparent;
left: 62.2%;
top: 56%;
}
/* Top Row */
.Diamond>:first-child {
left: 32.2453703704%;
top: 10.9259259259%;
}
.Diamond>:nth-child(2) {
left: 44.6990740741%;
top: 10.9259259259%;
}
.Diamond>:nth-child(3) {
left: 57.1527777778%;
top: 10.9259259259%;
}
/* Second Row */
.Diamond>:nth-child(4) {
left: 19.7916666667%;
top: 30.9259259259%;
}
.Diamond>:nth-child(5) {
left: 32.2453703704%;
top: 30.9259259259%;
}
.Diamond>:nth-child(6) {
left: 44.6990740741%;
top: 30.9259259259%;
}
.Diamond>:nth-child(7) {
left: 57.1527777778%;
top: 30.9259259259%;
}
.Diamond>:nth-child(8) {
left: 69.6064814815%;
top: 30.9259259259%;
}
/* Third Row */
.Diamond>:nth-child(9) {
left: 7.33796296296%;
top: 50.9259259259%;
}
.Diamond>:nth-child(10) {
left: 19.7916666667%;
top: 50.9259259259%;
}
.Diamond>:nth-child(11) {
left: 32.2453703704%;
top: 50.9259259259%;
}
.Diamond>:nth-child(12) {
left: 44.6990740741%;
top: 50.9259259259%;
}
.Diamond>:nth-child(13) {
left: 57.1527777778%;
top: 50.9259259259%;
}
.Diamond>:nth-child(14) {
left: 69.6064814815%;
top: 50.9259259259%;
}
.Diamond>:nth-child(15) {
left: 82.0601851852%;
top: 50.9259259259%;
}
/* Fourth Row */
.Diamond>:nth-child(16) {
left: 7.33796296296%;
top: 70.9259259259%;
}
.Diamond>:nth-child(17) {
left: 19.7916666667%;
top: 70.9259259259%;
}
.Diamond>:nth-child(18) {
left: 32.2453703704%;
top: 70.9259259259%;
}
.Diamond>:nth-child(19) {
left: 44.6990740741%;
top: 70.9259259259%;
}
.Diamond>:nth-child(20) {
left: 57.1527777778%;
top: 70.9259259259%;
}
.Diamond>:nth-child(21) {
left: 69.6064814815%;
top: 70.9259259259%;
}
.Diamond>:nth-child(22) {
left: 82.0601851852%;
top: 70.9259259259%;
}<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>www.klejstruplund.dk/Forside</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="Diamond">
\t <img src="Resources/Triangles/Koekken.png">
\t <img src="Resources/Triangles/Kongelys.png">
\t <img src="Resources/Triangles/Hoene.png">
\t <img src="Resources/Triangles/Gaardvindue.png">
\t <img src="Resources/Triangles/Sorttomat.png">
\t <img src="Resources/Buttons/Vearelser.png">
\t <img src="Resources/Triangles/View.png">
\t <img src="Resources/Triangles/Besser_Rev.png">
\t <img src="Resources/Triangles/Fidus.png">
\t <img src="Resources/Triangles/Demon.png">
\t <img src="Resources/Buttons/Kursus.png">
\t <img src="Resources/Buttons/Union_Jack.png">
\t <img src="Resources/Buttons/Om_stedet.png">
\t <img src="Resources/Triangles/Drivhus.png">
\t <img src="Resources/Triangles/Indenfor.png">
\t <img src="Resources/Triangles/Mereindenfor.png">
\t <img src="Resources/Triangles/Huset.png">
\t <img src="Resources/Triangles/fidusiovn.png">
\t <img src="Resources/Triangles/Apples.png">
\t <img src="Resources/Triangles/Cabbage.png">
\t <img src="Resources/Triangles/Pond.png">
\t <img src="Resources/Triangles/Filtsommerfugl.png">
\t <a href="#"><div class="room" alt="Leje af Vaerelse"></div></a>
\t <a href="#"><div class="info" alt="Information om stedet"></div></a>
\t <a href="#"><div class="language" alt="Change Language to English"></div></a>
\t <a href="#"><div class="kursus" alt="Information om kurser"></div></a>
</div> \t \t \t
</body>
</html>我试图按照不同的解决方案，但至今都失败了，导致所有图像最新的放在垂直。 我知道我可以通过将模式创建为图像来简化它，但由于这是我的学习过程，因此我想使用CSS工具来完成此操作。
有点搜索和实验后，我决定在绝对定位的图像，在一个相对定位的div：
等共22个正三角形。
这导致了上述的三角形塔，我决定在我列出我的耐心之前得到一些帮助。我错过了什么？
更新 我加入了完整代码的HTML和CSS，但因为这个问题现在已经解决了，它似乎显得有些多余，所有我能说的是，我现在得到我想要的结果。
我被告知的问题是，我已经把选择器落后了;思考。钻石：第二个孩子（2）意味着容器分类钻石的第二个孩子将被选中。我现在在.Diamond和：n-child（x）/：first-child之间添加了一个“>”。 愚蠢的错误。
你需要用你的标记发布一个工作示例。 –
我不明白你的问题是什么，你需要发布更多的代码。但是，我确实可以告诉你，每个子号码的设置宽度：229px是多余的。也是高度196px – vals