CSSだけでドッグイヤー - 闘うITエンジニアの覚え書き

CSSいろいろ > CSSだけでドッグイヤー

CSSだけでドッグイヤー †

【コード】

<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>
<div class="dogear"><div>このドッグイヤーはCSSのみで表現しています</div></div>