![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
[[CSSいろいろ]] > CSSだけでドッグイヤー * CSSだけでドッグイヤー [#n6c549d1] #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>このドッグイヤーはCSSのみで表現しています</div></div>) #html(<style type="text/css"> .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 #ffffff #ffffff #666666; } </style>); #html(<div class="dogear"><div>このドッグイヤーはCSSのみで表現しています</div></div>); 【コード】 <style type="text/css"> .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; border-color : #666666 #ffffff #ffffff #666666; } </style> <div class="dogear"><div>このドッグイヤーはCSSのみで表現しています</div></div>
