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

4 votes359 views1 answer
Bootstrap file select class
CSS
30 votes366 views5 answers
Css vertical align
CSS
0 vote422 views1 answer
Bootstrap-navbar-brand
CSS Bootstrap
1 vote384 views4 answers
Screen orientation css
CSS
250 votes510 views10 answers
Bootstrap cdn
CSS
1 vote347 views1 answer
Break pre text
CSS
2 votes328 views1 answer
Css last of type
CSS
2 votes350 views6 answers
Tailwindcss
CSS
0 vote365 views1 answer
Vue center components in body
CSS
3 votes321 views1 answer
Double line borders in html
CSS