Hi all
I have a demo here - http://www.ttmt.org.uk/diamond.html
I don’t like doing this but I have something that works but I don’t know of it’s the best way.
I just need a diamond background with text centered horizontally and vertically.
I need to doing this a few times and the text will be a different size in each one.
At the moment I’m positioning the text absolutley and using transform to rotate the background and text.
Is this the simplest way to do this?
Is there a way to center the text without positioning because I’m going to have to position each one separately.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<!--css-->
<style type="text/css">
*{
margin:0;
padding:0;
font:16px Helvetica, sans-serif;
}
.diamond{
margin:50px;
width:100px;
height:100px;
background:red;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
position:relative;
}
.diamond-inner{
color:#fff;
font-weight:bold;
font-size:1.2em;
line-height:1.4em;
text-align:center;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
position:absolute;
top:22px;
left:5px;
}
</style>
<title>Title of the document</title>
</head>
<body>
<div class="diamond">
<div class="diamond-inner">
Business Starter
</div>
</div>
</body>
</html>