Search code examples
csssvgshapescss-shapes

How to make arrow-shaped background with css or svg?

I'd like to simply get pointed to the right direction... I have to code a css or svg background like this:

enter image description here

Also please note the rounded tip. Should I use pure css (and in this case, what rules should I look into)? Should I use svg some way? Where would you start from?

Solution

  • I would first design the arrow in software like Adobe Illustrator, export it as an svg, open the svg-file in a text file editor and then copying the svg-code from the svg file (in the text editor) into your HTML-document.

    In your HTML-document, you can put the svg on top of the background, and then put text on top of the svg

    <div id="background-with-arrow">
    <p>This is your text</p>

    <svg x="0px" y="0px" viewBox="0 0 1000 500">
        <path class="st0" d="M0,0v500h750l247.7-244.5c3.1-3.1,3.1-7.8,0-10.9L750,0H0z"/>
    </svg>
</div>

    Or you can even design the arrow with text in Illustrator, and do the same process of exporting as svg, and importing the svg code into your HTML.

    I've made a quick demo here