Css+div make page Fillet effect

Style sheet files:
.b1 {height:1px; font-size:1px; overflow:hidden; display:block;  Background: #000;  margin:0 5px;}
. B2 {height:1px; font-size:1px; overflow:hidden; display:block; background: #fff; &NBSP
border-right:2px solid  #000; border-left:2px solid  #000;  margin:0  3px;}
. B3 {height:1px; font-size:1px; overflow:hidden; display:block; background: #fff; &NBSP
border-right:1px solid  #000; border-left:1px solid  #000;  margin:0  2px;}
. B4 {height:2px; font-size:1px; overflow:hidden; display:block; background: #fff; &NBSP
border-right:1px solid  #000; border-left:1px solid  #000;  margin:0  1px;}

then look at the page code:
<b class= "B1" ></b><b class= "B2" ></b><b class= "B3 "></b><b class=" B4 "></b>";
<B&Nbsp;class= "B4" ></b><b class= "B3" ></b><b class= "B2" ></b><b  Class= "B1" ></b>
of course, you can also use other tags <div> or <span><a> and so on, it should also be possible

Add a left and right border content
between the two sentences. This is the effect:

Do you understand me? Let's analyze the code carefully:

Very difficult to do this picture, also do not know how to express more clearly, I believe we should be able to understand it, the principle is to do in the pixel map. Isn't that interesting? ~css function really strong, ah, understand the principle can be extrapolate design a lot of styles, let us boldly design a variety of effects it, firmly believe that the CSS can achieve