幻灯片控制用户界面

Question

我对CSS / bootstrap样式编程有点新意。 我正在尝试创建一个SlideOut控件。请参阅URL中的工作代码。

我面临以下列出的一些问题

1. 我无法获得按钮左侧的曲线，即左上角和左下角（请参阅快照）
2. 我想增加反馈区域的大小，即希望每个高度和宽度为500px。但是当我尝试在CSS #slideout_inner中进行转换时，滑出不会正常/顺利进行。

我想仅使用HTML和CSS / bootstrap来实现这个滑动控件，并且不想在其中使用JQuery。 有谁可以帮我解决这个问题？

在Button和innerarea

之间添加空格

Answer 1

<强>边框：

转动你的边框半径

应该是这样的

border-radius: 5px 0 0 5px;

/* here is the pattern */
border-radius: top-right top-left bottom-left bottom-right

<强>上浆：

您必须在3个地方更改大小

#slideout:hover {
  right: here;
}

#slideout_inner textarea {
  display: block;
  margin: 15px;
  width: here;
  height: 200px;
}

#slideout_inner textarea {
  width: here;
  height: 100px;
  margin-bottom: 6px;
}

<强>演示：

#slideout {
  position: fixed;
  top: 40px;
  right: 0;
  width: 35px;
  padding: 12px 0;
  text-align: center;
  background: #6DAD53;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}
#slideout_inner {
  position: fixed;
  top: 40px;
  right: -550px;
  background: #6DAD53;
  width: 500px;
  padding: 25px;
  height: 130px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  text-align: right;
  -webkit-border-radius: 0 0 0 5px;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}
#slideout_inner textarea {
  width: 490px;
  height: 100px;
  margin-bottom: 6px;
}
#slideout:hover {
  right: 550px;
}
#slideout:hover #slideout_inner {
  right: 0;
}

<div id="slideout">
  <img src="http://img.usabilitypost.com.s3.amazonaws.com/1104/css_slideout/feedback.png" alt="Feedback" />
  <div id="slideout_inner">
    <form>
      <textarea></textarea>
      <input type="submit" value="Post feedback">
    </form>
  </div>
</div>