CODEWITHSUNDEEP
htmlcss
gerdtf
gerdtf

Reputation: 705

CSS Rotation and Styling - how to?

I am trying to create a website based on a PSD template, and I came across this particular styling pattern:

enter image description here

Now I am trying to rotate and get the styling right but I can't figure out how to do it;

except taking the background away and making it one transparent png. But then I can't handle the single elements.

This is what I have so far:

HTML:

<div class="rotate">
    <div class="text">
        Hello
    </div>
</div>
<div class="rotate">
    <div class="text">
        Hello
    </div>
</div>

CSS

.rotate{
width: 200px;
height:200px;
margin: 30px 30px;
background: red;

 -webkit-transform: rotate(30deg);

 }

.text {

width:50px;
height:50px;
padding:75px;
 -webkit-transform: rotate(-30deg);
}

It does rotate the elements and somehow the text but the alignment does not really add up as in the image.

Upvotes: 1

Views: 88

Answers (2)

Adam Azad
Adam Azad

Reputation: 11297

Because I am a nice person and love challenges, otherwise, this question should be closed, but not sure why. "Do my work for me", maybe? yeah, this option should address the why question should be closed :).

You should figure out an alternative solution for small devices.

Here's your complete jsFiddle

HTML:

<div class="container">
    <div class="col-left">
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #1</a>
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #2</a>  
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #3</a>
    </div>
    <div class="col-right">
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #4</a>    
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #4</a>
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #4</a>    
    </div>
</div>

CSS:

a {
  font-family: "Open Sans", sans-serif;
  text-decoration:none;
}
a:active,
a:focus {
  color:#000000;
}
.container {
    display:block;
    width: 674px;
    margin:70px auto;
    padding-right:15px;
    padding-left:15px;
    text-align:center;
}
.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after { clear:both; }
.col-left,
.col-right {
  width: 50%;
  float: left;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.col-right {
    margin-top: 40px;
    margin-left: -64px;
}
.link {
  position:relative;
  display:block;
  padding: 60px 40px 0px 40px;
  text-align:center;
  text-transform:uppercase;
  width:120px;
  height:140px;
  color:#000;
  margin-bottom: 20px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.link:before {
  width:100%;
  height:100%;
  position:absolute;
  content:"";
  background:#ACDBFC;
  top:0;
  left:0;
  right:0;
  margin:auto;
  z-index:-1;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.link:hover {
  color:#000;
}
.link:hover:before {
  background:#FFFFFF; 
}
.link .fa {
  display:block;
  margin-bottom:10px;
}

Final output:

output

Upvotes: 2

Emil
Emil

Reputation: 1

You can create a <map> tag and then define different <area shape='poly' href='mypage1'> in it for each of your rectangles/buttons. That should take care of the shape and allow the user to click and go to the desired page. If you want to highlight each button when you are on it then on hover event for each area change the background color or image.

Also there may be some jQuery controls that do that. I'm sure you can achieve the desired effect with Adobe Flash too. I hope this helps.

Upvotes: 0

Related Questions