有角度邊境的CSS欄

我試圖創建一個簡單的側邊欄（掛靠在屏幕的右側），其中的第一件事，用戶將看到的是這樣附着在屏幕的右側：有角度邊境的CSS欄

（我對圖像質量表示歉意，我在Paint中做過）。正如你所看到的，邊界不是90度，而是一個角度。

之後，當用戶點擊此圖標時，它會展開帶有額外內容的隱形邊欄（我可以關注此部分）。

我有麻煩，正在創建上述圖片。這是到目前爲止我的html代碼：

<div class="row"> 

    <div class="SideBar"> 
     <i class="icon-cog icon-2x" aria-hidden="true"></i> 
     <div class="sidebar-content"> 
      <p>test</p> 
     </div> 
    </div> 

    <div class="col-sm-4 col-sm-offset-4"> 
     <h3>Some header here</h1> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 

     </ul> 
    </div> 
    </div>

和我的CSS：

.SideBar { 
    position:fixed; 
    height:100%; 
    overflow:hidden; 
    width:250px; 
    right:0; 
    z-index:1; 
    display:flex; 
} 

.SideBar > i { 
      color:black; 
     width:30px; 
     height:32px; 
     cursor:pointer; 
     padding:5px; 
     border-top:solid 1px blue; 
     border-left:solid 1px blue; 
     border-bottom:solid 1px blue; 
} 

.SideBar .sidebar-content { 
      display:inline-block; 
     width:100%; 
     height:100%; 
     background:#e6e6e6; 
}

最後我創建了一個普拉克哪裏有上述所有： https://plnkr.co/edit/CQpZOd6qkf95oYsbaXNj?p=preview

我知道這件事情簡單，但我不能讓它工作。正如你所看到的，我的圖像奇怪地被扭曲了（不在邊界的中心）。任何幫助將不勝感激！

來源

2016-07-27 Robert J.

試試這個

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.sidebar{ 
 
    height:100vh; 
 
    width:20%; 
 
    float:right; 
 
    background:#eee; 
 
    position:relative; 
 
} 
 
.icon{ 
 
    width:50px; 
 
    height:50px; 
 
    background-size:cover; 
 
    position:absolute; 
 
    top:25px; 
 
    left:-50px; 
 
    background-color:#eee; 
 
} 
 
.icon img{ 
 
    width:90%; 
 
    z-index:5; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
} 
 
.icon:before{ 
 
    content: ''; 
 
    width: 150%; 
 
    background: #eee; 
 
    height: 15px; 
 
    display: block; 
 
    position: absolute; 
 
    top: -10px; 
 
    transform: rotate(-10deg); 
 
    z-index: 1; 
 
} 
 
.icon:after{ 
 
    content: ''; 
 
    width: 150%; 
 
    background: #eee; 
 
    height: 15px; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: -10px; 
 
    transform: rotate(10deg); 
 
    z-index: 1; 
 
}

<div class="sidebar"> 
 
    <span class="icon"><img src="https://cdn3.iconfinder.com/data/icons/simple-files-1/128/Settings-128.png"></span> 
 
</div>

來源

2016-07-27 12:48:57

在你的CSS，試試這個

.SideBar > i { 
    color:black; 
    width:60px; 
    text-align: center; 
    height:60px; 
    line-height:60px; 
    cursor:pointer; 
    border-top:solid 1px blue; 
    border-left:solid 1px blue; 
    border-bottom:solid 1px blue; 
}

我添加的行高和刪除填充

來源

2016-07-27 12:56:03

有角度邊境的CSS欄

回答

相關問題