How can I draw a shape in CSS? - html

Question

initially in my chat application the reply on a chat is hidden and shows only count on the red box when user clicks on red button it shows all the reply by other users and in the end a input box for reply, all inside the blue box. How I can draw this shape using CSS.

Answer 1

Here's an example FIDDLE.
Spend all of your time playing with the CSS in the upper right hand corner, and watch what happens.
CSS
.holder {
width: 500px;
height: 400px;
border: 0px solid black;
}
.upper {
height: 30%;
border: 0px solid red;
}
.littleblue {
height: 100%;
width: 35%;
background-color: blue;
border-radius: 20px 20px 0px 0px;
float: right;
}
.littlered {
width: 90%;
height: 40px;
background-color: red;
margin: 10px auto;
border-radius: 20px;
}
.lower {
height: 70%;
background-color: blue;
border-radius: 20px 0px 20px 20px;
border: 0px solid green;
}

Answer 2

basicly with a form and 2 fielset :
<div>
<form>
<fieldset class="right">
<button>button</button>
</fieldset>
<fieldset>
</fieldset>
</form>
</div>
div {
width:50%;
margin:auto;
}
fieldset {
background:blue;
clear : right;
height:100px; /* remove height once content in */
border:none;
border-radius:1em 0 1em 1em;
}
.right {
float:right;
border-radius:1em 1em 0 0;
height:50px;/* remove height once content in */
position:relative;/* to set pseudo element where you want */
}
.right:after{
content:'';
height:2em;/* use he twice value and units used for radius */
width:2em;
position:absolute;
left:-2em;
bottom:0;
border-radius:2em;
box-shadow: 23px 23px 0 10px blue;/* drop shadow to draw inside round corner */
z-index:-1;
}
http://codepen.io/anon/pen/vIgon/