Question

我正在尝试创建一个简单的侧边栏（固定在屏幕右侧），用户将看到的第一件事就是附在屏幕右侧：

（我为图像质量道歉，我在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

我知道这很简单，但我不能让它发挥作用。正如您将看到的，我的图像奇怪地扭曲（不在边框的中心）。任何帮助都会受到赞赏！

Answer 1

试试这个

*{
  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>

Answer 2

在你的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;
}

我添加了行高和删除的填充

带有倾斜边框的侧边栏

2 个答案: