Place Title in Separator

As with the legend tag in a field, the text is placed on the split rule and the background under the text is erased.

This allows you to separate the two sections of the page, minimizing space usage.

Compatibility: IE6 +, Chrome, Firefox, Safari.

The principle is that a layer with text is placed inside another, a dark background is given to the container and its height is reduced to display the stroke, a white background is given to the inner layer and shifted so that it appears in the container .

Demonstration:

HTML code:

<div class="bartext"><div>Salut le Monde!</div></div>

CSS ID:

.bartext {
  height:8px;
  width:100%;
  padding:0px;
  background:#333;
  overflow:visible;
  position:relative;
  margin-top:24px;
}
.bartext div {
  color:#333;
  background-color:#FFFFFF;
  top:-5px;
  margin-left:100px;
  padding: 0 8px 8px 8px;
  display:inline;
  position:absolute;
}

You can change the color of the line and text, the thickness of the bar with the height property, the position of the text specified by the margin-left property.
If you want to center text, you will use the text: center in the .bartext rule and delete margin-left in the .bartext div.

To round the ends of a lane

Simply add the border-radius property to the .bartext rule.

border-radius:8px;

Here's the result:

Or give it a bevel

The following example is presented in pure CSS:

This effect is difficult to implement in pure CSS, and a beacon must be added to obtain it.

<div class="slantdiv"></div>
<div class="barslant"><div>Salut le Monde!</div>
<br>

Here's the CSS code:

.barslant {
  padding:0px;
  overflow:visible;
  position:relative;
  background:#333;
  height:0;  
  line-height:16px;  
  margin-top:0;
  width:90%;		
}
.barslant div {
  background-color:#FFFFFF;
  margin-left:100px;
  padding:0 8px 8px 8px;
  display:inline;
  position:absolute;
  color:#000;
  top:-12px;
}
.slantdiv {
  width:96%;
  height:0px;
  border-bottom:8px solid #333;
  border-right:8px solid white;
  margin-top:24px;
}

One limitation in the method used - regardless of the shape of the panel - is that the background of the page must be white, or more precisely, the background of the text must be the same color as the page.

If you want to use this widget in the background of a page that is an image, jsfiddle has a different solution. It also has the advantage that only one tag is needed in HTML code. But it also has its drawbacks. It is almost impossible to position the text on the left or right side. It is also impossible to adjust the bar, as was done above. Compatibility is also limited to IE as of version 8.

On the home page, you will find other tricks for creating graphic effects without images.

License: You can use this code to present your pages without restrictions. Do not repeat the content of this page or code as the subject of other online tutorials. This license covers all content on the site.