I'm trying to arrange a grid of images (triangles) and have text appear in each of them, this is going to be pulled from SQL. I've managed to get the images lined up and sized (I'm no expert when it comes to web design) but try as I may I cannot get the triangles right. Seems every time I try they just refuse to show, looking at it in Chrome's dev tools.
I need to find a way to have the text appear as below, I'm not sure the triangles in CSS thing is the best way of doing it so please let me know your opinions!
testingtest
testtet
tes
t
Here's what I've got so far.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
title
</title>
<style type="text/css">
#container1{
width:100%;
}
#container1 .image{
float:left;
width:220px;
height:204px;
background:#369;
color:#fff;
text-align:center;
}
#container1 .image p{
height:100%;
margin:0;
padding:0;
border:1px solid #123;
}
#mainbox{
margin:0 auto;
top:50px;
left:400px;
width:1200px;
height:100px;
}
#triangle {
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 0px 100px 100px 100px;
height: 0px;
width: 0px;
}
</style>
</head>
<body>
<div id="mainbox">
<div id="container1">
<p>
Wall of triangles
</p>
<div class="image">
<img src="red.png" width="100%" alt="some_text">
<div class="triangle">
<p>
Testing
</p>
</div>
</div>
<div class="image">
<img src="orange.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="blue.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="pink.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="green.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="yellow.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="red.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="blue.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="red.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="yellow.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="red.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="orange.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="yellow.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="pink.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="pink.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="red.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="yellow.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="red.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="blue.png" width="100%" alt="some_text">
</div>
<div class="image">
<img src="red.png" width="100%" alt="some_text">
</div>
</div>
</div>
</body>
</html>
