如何在CSS中繪製圖形？

Question

最初在我的聊天應用程序上聊天的答覆是隱藏的，當用戶點擊紅色按鈕只在顯示紅色框算它顯示其他用戶，並在最後的答覆輸入框中的所有回覆，都在藍色框內。我如何使用CSS來繪製這個形狀。

Answer 1

下面是一個示例FIDDLE。

花你所有的時間玩在右上角的CSS，看看會發生什麼。

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與窗體和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/