如何在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

基本上使用表单和2字段集：

<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/