Geek Answers Handbook

Creating a string using CSS

I am trying to create a straight horizontal line broken down in the middle to display an arrow. The idea is that the content displayed in the line will contain information about the content displayed above the line. This is what the line looks like:

enter image description here

I am trying to generate this using pure HTML and CSS (without bitmaps). Using Font Awesome is acceptable if it ends up getting the right result. I need to control the thickness and color of the line. The angle of breakdown does not matter (45 and 90 degrees according to the sample shown above). I know about this CSS triangle trick , but I can't think of a way to apply it to this scenario.

+6
source share
2 answers

This nice effect can be achieved using the CSS :before and :after properties. Your best bet is to play with cssarrowplease online simulator Simon Huiberg .

+11
source

A solution with a transparent arrow background that allows you to use it with each background:

HTML:

 <div class="line-separator"> <div class="side-line"> </div> <div class="triangle"> </div> <div class="side-line"> </div> </div>

CSS:

 .side-line { display: inline-block; border-top: 1px solid black; width: 20%; } .triangle { display: inline-block; height: 7px; width: 7px; transform: rotate(45deg); transform-origin: center center; border-top: 1px solid black; border-left: 1px solid black; margin: 0 -3px -3px; }

Demo Version: http://jsfiddle.net/85saaphw/

+4
source

More articles:


All Articles