test.css

.coma {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 0 170px;
  min-widht: 260px;
  widht:500px;
  height:400px;
  font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
.flex{
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -o-flexbox;
  display: flexbox;
  /* 基本のスタイルの設定 */
  width: auto;
  border: 1px solid #555;
  font: 14px Arial;

  /* flexbox の設定 */
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* 色の指定 */
.flex > div:nth-child(1){ background : #009246; }
.flex > div:nth-child(2){ background : #F1F2F1; }
.flex > div:nth-child(3){ background : #CE2B37; }

.flex > div
{
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-transition: width 0.7s ease-out;
  transition: width 0.7s ease-out;
  width: 500px; /* transition を上手く動作させるために指定します (始めまたは終わりに
  "width:auto" を指定している場合の transition は現在の Gecko と Webkit では不安定です。  詳細については http://bugzil.la/731886 を参照してください) */

}

span>span:before {
  content: "　";
}
span>span:after {
  content:"\A";
  white-space:pre;
}
span {
  -webkit-writing-mode:vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  word-wrap: break-word;
}

.bubble 
{
  position: relative;
  height: 355px;
  padding: 18px;
  background: #FFFFFF;
  -webkit-border-radius: 43px;
  -moz-border-radius: 43px;
  border-radius: 43px;
}

.bubble:after 
{
  content: "";
  position: absolute;
  top: 102px;
  right: -61px;
  border-style: solid;
  border-width: 8px 0 8px 61px;
  border-color: transparent #FFFFFF;
  display: block;
  width: 0;
  z-index: 1;
}

.oval-speech-border {
	position:relative;
  height:250px;
	padding:53px 32px;
	margin:1em auto 60px;
	border:10px solid #f3961c; 
	color:#333; 
	background:#fff;
	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
	Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
	*/
	-webkit-border-top-left-radius:240px 140px;
	-webkit-border-top-right-radius:240px 140px;
	-webkit-border-bottom-right-radius:240px 140px;
	-webkit-border-bottom-left-radius:240px 140px;
	-moz-border-radius:240px / 140px;
	border-radius:240px / 140px;
}

/* creates larger curve */
.oval-speech-border:before {
	content:""; 
	position:absolute; 
	z-index:2; 
	bottom:-40px; 
	right:50%; 
	width:50px; 
	height:30px;
	border-style:solid;
	border-width:0 10px 10px 0;
	border-color:#f3961c;
	margin-right:-10px;
	background:transparent;
	/* css3 */
	-webkit-border-bottom-right-radius:80px 50px;
	-moz-border-radius-bottomright:80px 50px;
	border-bottom-right-radius:80px 50px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates smaller curve */
.oval-speech-border:after {
	content:""; 
	position:absolute; 
	z-index:2; 
	bottom:-40px; 
	right:50%; 
	width:20px; 
	height:31px; 
	border-style:solid;
	border-width:0 10px 10px 0;
	border-color:#f3961c;
	margin-right:20px;
	background:transparent;
	/* css3 */
	-webkit-border-bottom-right-radius:40px 50px; 
	-moz-border-radius-bottomright:40px 50px; 
	border-bottom-right-radius:40px 50px; 
    /* reduce the damage in FF3.0 */
    display:block; 
}