CSSだけで吹き出しの変更点 - 闘うITエンジニアの覚え書き

追加された行はこの色です。
削除された行はこの色です。
CSSだけで吹き出しへ行く。

[[CSSいろいろ]] > CSSだけで吹き出し
* CSSだけで吹き出し [#n7b8f9de]

#html(<style type="text/css">.fukidashi {	position : relative;	padding : 10px;	margin : 20px auto;	width : 80%;	background : #cccccc;	-webkit-border-radius : 10px;	-moz-border-radius : 10px;	border-radius : 10px;	text-align : center;}.fukidashi div:after {	content : "";	position : absolute;	bottom : -25px;	left   : 50px;	width  : 0px;	height : 0px;	border-width : 15px 15px 15px 15px;	border-style : solid;	border-color : #cccccc transparent transparent transparent;}.dogear {	position : relative;	padding : 10px;	margin : 20px auto;	width : 80%;	text-align : center;	background : #cccccc;}.dogear div:after {	content : "";	display : block;	position : absolute;	bottom : 0px;	right  : 0px;	width  : 0px;	height : 0px;	border-width : 5px 5px 5px 5px;	border-style : solid;	border-color : #666666 #f2f2f2 #f2f2f2 #666666;}</style><div class="fukidashi"><div>この吹き出しはCSSのみで表現しています</div></div>)

【コード】
 <style type="text/css">
 .fukidashi {
 	position : relative;
 	padding : 10px;
 	margin : 20px auto;
 	width : 80%;
 	background : #cccccc;
 	-webkit-border-radius : 10px;
 	-moz-border-radius : 10px;
 	border-radius : 10px;
 	text-align : center;
 }
 
 .fukidashi div:after {
 	content : "";
 	position : absolute;
 	bottom : -25px;
 	left   : 50px;
 	width  : 0px;
 	height : 0px;
 	border-width : 15px 15px 15px 15px;
 	border-style : solid;
 	border-color : #cccccc transparent transparent transparent;
 }
 </style>
 <div class="fukidashi"><div>この吹き出しはCSSのみで表現しています</div></div>

CSSだけで吹き出し の変更点 - 闘うITエンジニアの覚え書き

CSSだけで吹き出しの変更点 - 闘うITエンジニアの覚え書き