-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