<div>
クラス.top-left
、.top-right
、.bottom-left
およびで4 を作成できます.bottom-right
。それらを絶対にし、コンテナを相対的にします。それらのサイズを変更し、コンテナーの色を bg-color にして、top, right, bottom and left
プロパティを使用して隅に配置します。それらの値は、ボーダー幅を引いたものでなければなりません。3px の境界線を持つ要素の例を次に示します。
HTML:
<div class="box">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
CSS:
.box{
width: 300px;
height: 300px;
border: 3px solid #666;
position:relative;
}
.corner{
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
}
.top-left{
top: -3px;
left: -3px;
}
.top-right {
top: -3px;
right: -3px;
}
.bottom-left{
bottom: -3px;
left: -3px;
}
.bottom-right{
bottom: -3px;
right: -3px;
}