Css hexagon with text inside

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20" fill="#fa5" stroke="blue" stroke-width="5" transform="translate(10)"></polygon>
    <text x="160" y="160" 
        font-family="Verdana" 
        font-size="30"
        text-anchor="middle"
    >
    Any Text Here
    </text>  
</svg>

Source: stackoverflow.com

Css hexagon with text inside

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="900px" height="100" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20" fill="#fa5" stroke="blue" stroke-width="5" transform="translate(10)"></polygon>
    <text x="160" y="160" 
        font-family="Verdana" 
        font-size="30"
        text-anchor="middle"
    >
    Any Text Here
    </text>  
</svg>

Source: stackoverflow.com

Similar codes

0 vote164 views1 answer
Css flex alle elemente gleiche höhe
CSS
28 votes186 views5 answers
Font face html
CSS
0 vote187 views1 answer
Spinner in html css react
CSS
17 votes206 views3 answers
How to set div background image
CSS
9 votes182 views4 answers
Change button size css
CSS
1 vote176 views1 answer
Css Use the correct background property to make the background image NOT scroll with the rest of the page.
CSS
4 votes230 views2 answers
How to set text in center in flex item
CSS
0 vote178 views1 answer
When change size image not change contrast css
CSS
0 vote206 views2 answers
Scrollbar not working
CSS
2 votes190 views2 answers
Image rendering css
CSS