スライドアウトコントロールUIの問題

Question

私はCSS /ブートストラップスタイルのプログラミングには少し慣れています。 SlideOutコントロールを作成しようとしています。作業コードはURLを参照してください。

1. 下記のよう

   私はボタンすなわち左上と左下の左側に曲線を取得することはできませんよいくつかの問題に直面しています

2. （スナップショットを参照してください）フィードバック領域のサイズを増やしたいとします。つまり、高さと幅をそれぞれ500ピクセルにしたいとします。しかし、CSS #slideout_innerでそれを流してみると、スライドアウトが適切に/スムーズに行われません。

このスライドアウトコントロールは、HTMLとCSS /ブートストラップのみを使用して実装したいので、JQueryを使用したくありません。 誰でもこの問題を手伝ってもらえますか？

スペースボタンと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>