CSS旋轉和樣式-如何？

Question

我試圖基於PSD模板創建一個網站，但遇到了這種特殊的樣式模式：

現在，我正在嘗試旋轉並正確設置樣式，但是我不知道該怎么做。

除了移除背景並將其設為一個透明png。 但是，我無法處理單個元素。

這是我到目前為止的內容：

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);
}

它的確旋轉元素並以某種方式旋轉文本，但是對齊方式並沒有像圖像中那樣真正相加。

Answer 1

因為我是一個善良的人，並且熱愛挑戰，否則，應該關閉此問題， 但不確定為什么 。 “也許我為我工作”嗎？ 是的，此選項應解決為什么應關閉問題的原因:)。

您應該為小型設備找到替代解決方案。

這是您完整的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;
}

最終輸出：

Answer 2

您可以創建一個<map>標簽，然后為每個矩形/按鈕定義不同的<area shape ='poly'href ='mypage1'>。 那應該注意形狀，並允許用戶單擊並轉到所需的頁面。 如果要突出顯示每個按鈕，則在每個區域懸停事件發生時，請更改背景顏色或圖像。

也可能有一些jQuery控件可以做到這一點。 我相信您也可以使用Adobe Flash達到理想的效果。 我希望這有幫助。