jiichan.com

PROGRAMMING

CSS
javascript
PHP
Java

実践と点線の交わり部分のギザギザをすっきりさせる

見出しなどで、太さの違う実践と点線の交わりをすっきりさせる方法を擬似要素で 実現する方法を見つけたのでメモっておく。

ごく普通にborderを設定した場合


<div class="sample01"></div>


.sample01 {
	width: 200px;
	height: 50px;
	margin-left: 30px;
	background-color: #ffffff;
	border-top: 1px #5ba1cf dashed;
	border-right: 5px #96dd3b solid;
	border-bottom: 1px #6600cc dashed;
	border-left: 5px #008200 solid;
}

sample01

少し見えにくいが角の交差している部分がギザギザしている。

点線部分だけを擬似要素で追加すると


<div class="sample02"></div>


.sample02 {
	position: relative;
	width: 200px;
	height: 50px;
	margin-left: 30px;
	background-color: #ffffff;
	border-right: 5px #96dd3b solid;
	border-left: 5px #008200 solid;
}
.sample02:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 0;
	width: 100%;
	border-top: 1px #5ba1cf dashed;
}
.sample02:after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	height: 0;
	width: 100%;
	border-bottom: 1px #6600cc dashed;
}

sample02

交差部分のギザギザが無くなってキレイになりました。