PROGRAMMING
Warning: Invalid argument supplied for foreach() in /home/mmken1/jiichan.com/public_html/programming/programming.php on line 99
実践と点線の交わり部分のギザギザをすっきりさせる
見出しなどで、太さの違う実践と点線の交わりをすっきりさせる方法を擬似要素で 実現する方法を見つけたのでメモっておく。
ごく普通に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
交差部分のギザギザが無くなってキレイになりました。
- 参考にさせていただいたサイト
- http://weboook.blog22.fc2.com/blog-entry-348.html