Css 滑动控件UI中的问题

我对CSS/引导式编程有点陌生。 我正在尝试创建一个滑动控件。请参阅中的工作代码

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

我无法获取按钮左侧的曲线，即左上角和左下角（请参考快照）

我想增加反馈区域的大小，即希望每个区域的高度和宽度为500px。但是当我试着在CSS中改变它时，滑出并不正确/顺利 我只想使用HTML和CSS/bootstrap实现这个滑动控件，不想在其中使用JQuery。 有人能帮我解决这个问题吗

---

在按钮和内部区域之间添加空间，

边框：

把你的边界半径转过来

应该是这样的

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

演示：

#滑出{
位置：固定；
顶部：40px；
右：0；
宽度：35px；
填充：12px0；
文本对齐：居中；
背景#6DAD53；
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
过渡时间：0.3s；
-o-过渡持续时间：0.3s；
-webkit边界半径：5px 0 5px；
-moz边界半径：5px 0 5px；
边界半径：5px 0 5px；
}
#内滑出{
位置：固定；
顶部：40px；
右图：-550px；
背景#6DAD53；
宽度：500px；
填充：25px；
高度：130像素；
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
过渡时间：0.3s；
-o-过渡持续时间：0.3s；
文本对齐：右对齐；
-webkit边界半径：0 5px；
-moz边界半径：0 5px；
边界半径：0 5px；
}
#滑出内部文本区域{
宽度：490px；
高度：100px；
边缘底部：6px；
}
#滑出：悬停{
右：550px；
}
#滑出：悬停#滑出#内部{
右：0；
}

---

边框：

把你的边界半径转过来

应该是这样的

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

演示：

#滑出{
位置：固定；
顶部：40px；
右：0；
宽度：35px；
填充：12px0；
文本对齐：居中；
背景#6DAD53；
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
过渡时间：0.3s；
-o-过渡持续时间：0.3s；
-webkit边界半径：5px 0 5px；
-moz边界半径：5px 0 5px；
边界半径：5px 0 5px；
}
#内滑出{
位置：固定；
顶部：40px；
右图：-550px；
背景#6DAD53；
宽度：500px；
填充：25px；
高度：130像素；
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
过渡时间：0.3s；
-o-过渡持续时间：0.3s；
文本对齐：右对齐；
-webkit边界半径：0 5px；
-moz边界半径：0 5px；
边界半径：0 5px；
}
#滑出内部文本区域{
宽度：490px；
高度：100px；
边缘底部：6px；
}
#滑出：悬停{
右：550px；
}
#滑出：悬停#滑出#内部{
右：0；
}

曲线看起来很好，如何增加反馈区域的宽度和高度？@Krishnan您必须在3个位置更改大小，但当您这样做时，效果很好。尝试在#滑出#内部{位置：固定；顶部：40px；右侧：-250px；背景：#6DAD53；宽度：400px；填充：25px；高度：400px；过渡持续时间：0.3s；文本对齐：右侧；边框半径：0.5px；}它完全改变了整个外观和平滑度，不会滑入。我在这里犯了什么错误？除了“滑出”内部，还有哪些地方需要修改？@Krishnan我已经修改了我的答案，我猜这只是你在某个地方找到的代码，而不是你自己编写的代码。曲线看起来很好，如何我是否增加了反馈区域的宽度和高度？@Krishnan您必须在3个位置更改大小，但当您这样做时，效果很好。在“滑动”内部尝试过{位置：固定；顶部：40px；右侧：-250px；背景：#6DAD53；宽度：400px；填充：25px；高度：400px；过渡持续时间：0.3s；文本对齐：右侧；边框半径：0.5px；}它完全改变了整个外观和平滑度，不会滑入。我在这里犯了什么错误？除了“滑出内部”，我还需要在其他两个地方进行更改吗？@Krishnan我已经修改了我的答案，我猜这只是你在某个地方找到的代码，而不是你自己编写的代码。