【CSS3のみでの見出し】サンプル集からの抜粋 (吹出し / リボン)


CSSのみでの見出し特集吹出し・リボン


二段見出し見出しの補足説明など

HTML
<h2><div class="selector12">二段見出し<span class="selector12b">
見出しの補足説明など</span></div></h2>
CSS
/*二段見出し*/
.selector12{  
    border-left:7px solid #ccc;  
    padding:.8em .9em;  
}  
.selector12b{  
    display: block;  
    padding-top:.2em;  
    font-size:.8em;  
    color:#ccc;  
}  



見出し(切り取り線)

HTML
<h2><div id="heading01">見出し(切り取り線)</div></h2>
CSS
/* 01.切り取り線 */
#heading01{
	position:relative;
	padding:5px;
	font:bold 24px/1.6 Arial, Helvetica, sans-serif;
	text-align:center;
	color:#655;
	border-top:1px dashed #aaa;
	border-bottom:1px dashed #aaa;
	background:#eee;
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	box-shadow:	0 5px 4px -4px rgba(0,0,0,0.3) inset;
}




見出し(テープ)

HTML
<h2><div id="heading02">見出し(テープ)</div></h2>
CSS
/* 02.テープ */
#heading02{
	position:relative;
	margin:0 -1px;
	font:bold 30px/1.6 Arial, Helvetica, sans-serif;
	text-align:center;
	color:#333;
	background:#f0e800;
	-webkit-transform: rotate(-3deg) skew(-3deg);
	-moz-transform: rotate(-3deg) skew(-3deg);
	-o-transform: rotate(-3deg) skew(-3deg);
	-ms-transform: rotate(-3deg) skew(-3deg);
	transform: rotate(-3deg) skew(-3deg);
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	box-shadow:	0 1px 2px 0 rgba(0,0,0,0.2),
				30px 0 0 0 #f0e800,
				-30px 0 0 0 #f0e800;
}





見出し(リボン)

HTML
<h2><div id="heading03">見出し(リボン)</div></h2>
CSS
/* 03.リボン */
#heading03{
	position:relative;
	margin:0 -10px;
	padding:5px;
	font:normal 28px/1.6 "Times New Roman", Times, serif;
	text-align:center;
	color:#ffe8e8;
	background:#f99;
	-webkit-transform: rotate(-3deg) skew(-3deg);
	-moz-transform: rotate(-3deg) skew(-3deg);
	-o-transform: rotate(-3deg) skew(-3deg);
	transform: rotate(-3deg) skew(-3deg);
	box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);
    background-image: -webkit-gradient(linear, left top, left bottom,
			from(			rgba(0, 0, 0, 0.0)), 
			color-stop(0.08, rgba(255, 255, 255, 0.5)),
			color-stop(0.12, rgba(255, 255, 255, 0.5)),
			color-stop(0.12, rgba(0, 0, 0, 0.0)),
			color-stop(0.88, rgba(0, 0, 0, 0.0)),
			color-stop(0.88, rgba(255, 255, 255, 0.5)),
			color-stop(0.92, rgba(255, 255, 255, 0.5)),
			color-stop(0.92, rgba(0, 0, 0, 0.0)),
			to(				rgba(0, 0, 0, 0.0))
			);
	background-image: -moz-linear-gradient(top,
			transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92%	
			);
	background-image: -o-linear-gradient(top,
			transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92%	
			);
	background-image: linear-gradient(to bottom,
			transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92%	
			);
}
#heading03:before{
	content:" ";
	position:absolute;
	top:-5px;
	left:0;
	width:0;
	height:0;
	border-width:0 0 5px 10px;
	border-style:solid;
	border-color:transparent;
	border-bottom-color:#c66;
}
#heading03:after{
	content:" ";
	position:absolute;
	top:100%;
	right:0;
	width:0;
	height:0;
	border-width:5px 10px 0 0;
	border-style:solid;
	border-color:transparent;
	border-top-color:#c66;
}





見出し(色付箋風)

HTML
<h2><div id="heading10">見出し(色付箋風)</div></h2>
CSS
/*色付箋風*/

#heading10{
	position:relative;
	margin:0 10px;
	padding:0 10px 0 55px;
	font:bold 22px/40px Arial, Helvetica, sans-serif;
	color:#666;
	background:#f3f3f3;
	z-index:1;
}
#heading10:before{
	content:" ";
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:40px;
	border-right:#fff solid 2px;
	background:#f60;
    background-image: -webkit-gradient(linear, left top, left bottom,
			from(			 rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.6)), 
			to(				 rgba(255, 255, 255, 0.6))
			);
	background-image: -webkit-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -moz-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -o-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: linear-gradient(to bottom,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
			z-index:-1;
}
#heading10:after{
	content:" ";
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:40px;
    background-image: -webkit-gradient(linear, left top, right top,
			from(			 rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.6)), 
			to(				 rgba(255, 255, 255, 0.6))
			);
	background-image: -webkit-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -moz-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -o-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: linear-gradient(to right,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
			z-index:-1;
}




見出し(下点線)

HTML
<h2><div class="headline1">見出し(下点線)</div></h2>
CSS
/*下点線見出し*/
.headline1 {
    border-bottom: 1px dashed #aaa;
    border-left: 7px solid #aaa;
    border-left: 7px solid rgba(0,0,0,.2);
    margin: 0 -15px 15px -22px;
    padding: 5px 15px;
}




吹出し(下線のみ)

HTML
<h2><div class="headline2 ">吹出し(下線のみ)</div></h2>
CSS
/*下線のみ吹出し*/
.headline2 {
    border-bottom: 1px solid #aaa;
    margin: 15px 0;
    padding: 5px 0;
    position: relative;
}
 
.headline2:before,
.headline2:after{
    content: '';
    border-right: 20px solid #fff;
    border-top: 15px solid #aaa;
    bottom: -15px;
    position: absolute;
    left: 25px;
}



吹出し(アメリカン風)

HTML
<h2><div id="heading05">吹出し(アメリカン風)</div></h2>
CSS
/*アメリカン風吹出し*/
/* 05.アメリカンな(?)吹き出し */
#heading05{
	position:relative;
	padding:5px 20px;
	font:bold 28px/1.6 Arial, Helvetica, sans-serif;
	color:#333;
	background:#fff;
	text-shadow:
		1px 1px 0 #fff,
		2px 2px 0 #999;
	border-top:#333 solid 3px;
	border-bottom:#333 solid 3px;
    background-image: -webkit-gradient(linear, left top, right bottom,
			from(			rgba(255, 255, 255, 0.0)), 
			color-stop(0.4, rgba(255, 255, 255, 0.0)), 
			color-stop(0.4, rgba(0, 0, 0, 0.1)), 
			color-stop(0.6, rgba(0, 0, 0, 0.1)), 
			color-stop(0.6, rgba(255, 255, 255, 0.0)),
			to(				rgba(255, 255, 255, 0.0))
			);
	background-image: -webkit-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -moz-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -o-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: linear-gradient(to bottom -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-size:4px 4px;
}
#heading05:before{
	content:" ";
	position:absolute;
	top:100%;
	left:24px;
	width:0;
	height:0;
	border-width:12px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#333;
}
#heading05:after{
	content:" ";
	position:absolute;
	top:100%;
	left:28px;
	width:0;
	height:0;
	border-width:8px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#f0f0f0;
	z-index:1;
}



吹出し(凹み)

HTML
<h2><div class="headding08">吹出し(凹み)</div></h2>
CSS
/*凹み吹出し*/
.headding08 {
	background: #1d8ade; 
	margin:0 0 30px 0;
	padding:12px 10px;
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	position:relative;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-left:1px solid #036;
	border-top:1px solid #036;
	box-shadow:inset 1px 1px 4px #036;
	}
 
.headding08:before {
	content: ' ';
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	left: 14px;
	bottom: -27px;
	background: transparent;
	border-color: #1d8ade transparent transparent transparent ;
	border-style:solid;
	border-width:15px;
	}



インデックス型の見出し

HTML
<h2><div id="heading08">インデックス型の見出し</div></h2>
CSS
/* 08.インデックス型の見出し */
#heading08{
	position:relative;
	padding:10px;
	background:#88ccef;
	box-shadow:
		10px 0 0 0 #88ccef,
		-10px 0 0 0 #88ccef,
		0 3px 3px 0 rgba(0,0,0,0.1);
}
#heading08:before{
	content:" ";
	position:absolute;
	top:-8px;
	left:-10px;
	width:120px;
	height:0;
	border-width:0 5px 8px 0;
	border-style:solid;
	border-color:transparent;
	border-bottom-color:#88ccef;
}
#heading08:after{
	content:" ";
	position:absolute;
	top:-10px;
	right:-10px;
	width:0;
	height:0;
	border-width:0 10px 10px 0;
	border-style:solid;
	border-color:transparent;
	border-bottom-color:#7bb8d8;
}



リボン型の見出し(影調整)

HTML
<h2><div id="heading06">リボン型の見出し(影調整)</div></h2>
CSS
/*.リボン型の見出し(影調整)*/

#heading06{
	position:relative;
	padding:10px;
	background:#88ccef;
	box-shadow:
		10px 0 0 0 #88ccef,
		-10px 0 0 0 #88ccef,
		0 3px 3px 0 rgba(0,0,0,0.1);
}
#heading06:before{
	content:" ";
	position:absolute;
	top:100%;
	left:-10px;
	width:0;
	height:0;
	border-width:0 10px 10px 0;
	border-style:solid;
	border-color:transparent;
	border-right-color:#7bb8d8;
}
#heading06:after{
	content:" ";
	position:absolute;
	top:100%;
	left:100%;
	width:0;
	height:0;
	border-width:10px 10px 0 0;
	border-style:solid;
	border-color:transparent;
	border-top-color:#7bb8d8;
}



リボン型の見出し(切りっぱなし)

HTML
<h2><div id="heading07">リボン型の見出し(切りっぱなし)</div></h2>
CSS
/*07.リボン型の見出し(切りっぱなし)*/
#heading07{
	position:relative;
	padding:10px;
	background:#88ccef;
	box-shadow:
		10px 0 0 0 #88ccef,
		-10px 0 0 0 #88ccef,
		0 3px 3px 0 rgba(0,0,0,0.1);
}
#heading07:before{
	content:" ";
	position:absolute;
	top:100%;
	left:-10px;
	width:0;
	height:0;
	border-width:0 10px 10px 0;
	border-style:solid;
	border-color:transparent;
	border-right-color:#7bb8d8;
}
#heading07:after{
	content:" ";
	position:absolute;
	top:0px;
	left:100%;
	width:0;
	height:0;
	border-width:20px 10px;
	border-style:solid;
	border-color:#88ccef;
	border-right-color:transparent;
}



見出し(右ページカールエフェクト)

THML
<h2><div class="headline4 ">見出し(右ページカールエフェクト)</div></h2>
CSS
/*見出し右が剥がれる*/
.headline4{
    position: relative;
    border-color: #eee;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    background: #fff;
    margin: 0 0 15px -15px;
    padding: 5px 15px;
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
 
.headline4:after
{
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    right: 15px;
    width: 70%;
    height: 10px;
    background: rgba(0, 0, 0, .7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}



矢印型の見出し

HTML
<h2><div id="heading09">矢印型の見出し</div></h2>
CSS
/* 09.矢印型の見出し */
#heading09{
	position:relative;
	padding:10px;
	background:#88ccef;
	box-shadow:
		10px 0 0 0 #88ccef,
		-10px 0 0 0 #88ccef,
		0 3px 3px 0 rgba(0,0,0,0.1);
}
#heading09:before{
	content:" ";
	position:absolute;
	top:-10px;
	left:-70px;
	width:0;
	height:0;
	border-width:30px;
	border-style:solid;
	border-color:transparent;
	border-right-color:#88ccef;
}
#heading09:after{
	content:" ";
	position:absolute;
	top:-10px;
	right:-10px;
	width:0;
	height:0;
	border-width:0 10px 10px 0;
	border-style:solid;
	border-color:transparent;
	border-bottom-color:#7bb8d8;
}



ページカールエフェクト

HTML
<h2><div class="headding05">ページカールエフェクト</div></h2>
CSS
/*ページカールエフェクト*/
.headding05 {
	margin:0 0 30px 0;
	padding:12px 10px;
	background: #1d8ade; /* Old browsers */
	background: -moz-linear-gradient(left, #1d8ade 0%, #53a2e2 50%, #1d8ade 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d8ade), color-stop(50%,#53a2e2), color-stop(100%,#1d8ade)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* IE10+ */
	background: linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* W3C */
	color:#FFF;
	text-shadow:1px 1px 2px #333;
	box-shadow:0 2px 3px rgba(0, 0, 0, 0.4) , inset 0 0 50px rgba(0, 0, 0, 0.1) ;
	position:relative;
	}
 
.headding05:before,
.headding05:after{
	content: ' ';
	position: absolute;
	z-index: -1;
	width: 40%;
	height: 20px;
	left: 4px;
	bottom:7px;
	-webkit-box-shadow: 0 8px 15px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
	background-color: #F00;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.headding05:after{
	  -webkit-transform: rotate(3deg);
	  -moz-transform: rotate(3deg);
	  -o-transform: rotate(3deg);
	  -ms-transform: rotate(3deg);
	  transform: rotate(3deg);
	  right: 10px;
	  left: auto;
}



ワンポイント見出し

HTML
<h4><div class="one">ワンポイント見出し</div></h4>
CSS
/*ワンポイントを付ける*/
.one {
  position: relative;
  color: #111;
  font-size: 20px;
  line-height: 1;
  margin: 30px 0 0 0;
  padding: 14px 5px 10px 10px;
}
.one:before {
  content: "";
  position: absolute;
  background: #999;
  top: 0;
  left: -5px;
  height: 12px;
  width: 12px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.one:after {
  content: "";
  position: absolute;
  background:#777;
  top: 15px;
  left: -10px;
  height: 8px;
  width: 8px;
  -moz-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  transform: rotate(15deg);
}




ぽわわーんとした吹き出し


HTML
<div class="wrapper">
  <div class="box">
	
   </div>
</div>
CSS
/*ぽわわーんとした吹き出し*/
* {
                box-sizing: border-box;
            }
 
            .wrapper {
                padding: 30px;
                position: relative;
            } 
 
            .box {
                position: relative;
                background: #ccc;
                height: 70px;
                width: 100px;
                margin-bottom: 20px;
                border-radius: 50px;
            }
 
            .box:before {
                content: '';
                position: absolute;
                background: #ccc;
                height: 20px;
                width: 20px;
                border-radius: 10px;
                bottom: -20px;
                left: 70px;
            }
 
            .box:after {
                content: '';
                position: absolute;
                background: #ccc;
                height: 10px;
                width: 10px;
                border-radius: 5px;
                bottom: -30px;
                left: 90px;
            }



丸い(曲線の)吹き出し


HTML
<div class="wrapper2a">
      <div class="box2a">
          
      </div>
 </div>
CSS
/*丸い(曲線の)吹き出し*/
* {
                box-sizing: border-box;
            }
 
            .wrapper2a {
                padding: 30px;
                position: relative;
            } 
 
            .box2a {
                position: relative;
                background: #ccc;
                height: 70px;
                width: 100px;
                margin-bottom: 20px;
                border-radius: 50px;
            }
 
            .box2a:after {
                content: '';
                position: absolute;
                height: 50px;
                width: 50px;
                border-radius: 25px;
                z-index: -1;
                background: #fff;
                bottom: -20px;
                left: 50px;
            }
 
            .box2a:before {
                content: '';
                position: absolute;
                height: 50px;
                width: 50px;
                border-radius: 25px;
                z-index: -1;
                background: #ccc;
                bottom: -15px;
                left: 35px;
            }

Comments

Comments are closed.

Calendar
2013年11月
月 火 水 木 金 土 日
« 10月   12月 »
 123
45678910
11121314151617
18192021222324
252627282930  
Category
Archives