html - DOM 要素の数が最も少ないピクセル幅のパーセンテージ

Question

最小数の DOM 要素を使用し、画像なしでこのレイアウトをレンダリングする純粋な CSS ソリューションを見つけようとしています。

実際の問題は、div を 50% 幅からいくつかのピクセルを引いたものにすることです。たとえば、50% 幅から 10px を引いたものです。

私は最善を尽くしてjsfiddleをセットアップしました-これは完全に機能しますが、DOM要素が少ないものを望んでいます。

これは私のHTMLです：

<div class="main"></div>
<div class="backHalf">
    <div class="backLeft1"></div>
    <div class="backLeft2"></div>
    <div class="backLeft3"></div>
</div>
<div class="backHalf">
    <div class="backRight1"></div>
    <div class="backRight2"></div>
    <div class="backRight3"></div>
</div>

およびCSS:

.main, .backHalf div { height: 10px; background-color: #000}
.backHalf { width: 50%; float:left}
.backMain { height: 50px; }
.backLeft1 { margin-right: 10px; }
.backRight1 { margin-left: 10px; }
.backLeft2 { margin-right: 20px; }
.backRight2 { margin-left: 20px; }
.backLeft3 { margin-right: 30px; }
.backRight3 { margin-left: 30px; }

ところで、より良い解決策があれば、DOM 要素が大幅に少なくなることはないと確信していますが、1 つを失うだけでも役に立ちます。たとえば、「backHalf」div を使用せずに同じ結果を得ることができれば、非常に役立ちます。