吹き出しのCSSを簡単に作成する方法

2015/09/05

CSS

code

CSSを知識なくても簡単に作成できます。
当サイトだと上記の部分で使用しています。

cssarrowpleaseで自動生成

cssarrowplease

・向き（下向き）
・色
・線や吹き出しの大きさ

を画像のように指定すると右側にCSSが自動生成されます。

.arrow_box {
	position: relative;
	background: #fff;
	border: 1px solid #aaa;

	/*追加分 start*/
    	display: block;
    	width: 68px;
    	margin-bottom: 7px;
	padding: 3px 0;
 	text-align: center;
	border-radius: 3px;
	/*追加分 end*/
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 5px;
	margin-left: -5px;
}
.arrow_box:before {
	border-color: rgba(170, 170, 170, 0);
	border-top-color: #aaa;
	border-width: 6px;
	margin-left: -6px;
}

自動生成されたものに、少しだけ追加して使っています。
CSSがよくわからなくても、自動生成してくれるので便利です。