Use a repeating character as a table border

I want to create a table with table border by using a recurring character: $

. I want the result to be like

$$$$$$$$$$$$$
$           $
$    asd    $
$           $
$$$$$$$$$$$$$

      

I was thinking about using pseudo-elements, but that won't give the desired result. Is there a way to achieve this with CSS3?

+3


source to share


1 answer


You can do this using svg



<svg width="500" height="500">
    <defs>
    <pattern id="p" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse" >
        <text x="0" y="30" font-size="40">$</text>
        </pattern>
    </defs>
    <rect x="0" y="0" width="500" height="500" stroke="url(#p)" fill="none" stroke-width="100"/>
      

Run codeHide result


+10


source







All Articles