Jump to content

How to double circle around the text

newcoder1010

By newcoder1010
in CSS

 Share

Recommended Posts

newcoder1010 Invested Member

newcoder1010

Posted
  • Author
Posted

HTML:

<section id="block-block-39" class="block block-block satisfactionguaranteed col-md-4 contextual-links-region clearfix">

  <p>100% SATISFACTION GUARANTEED</p>

</section>

I applied this:

.satisfactionguaranteed {width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000}
I only see "100%" inside circle. rest is outside the circle.
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

svg?

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
   <circle cx="50" cy="50" r="49" stroke="skyblue" stroke-width="2" fill="white" />
<circle cx="50" cy="50" r="45" stroke="lightblue" stroke-width="3" fill="white"  />
  <text  y="20" style="fill:blue;" font-size="8">
<tspan x="23" y="32">SATISFACTION</tspan>
    <tspan x="13"  y="58" font-size="31">100%</tspan>
    <tspan  x="23"  y="70">GUARANTEED</tspan>
  </text>



   Sorry, your browser does not support inline SVG.
</svg> 
 
</body>
</html>
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

Replicated in svg

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <style type="text/css">
            .svg_wrap {
                color: #000066;
                font: bold 96% Euphemia;
                margin: 1% auto;
                max-width: 960px;
                text-align: center;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
                width: 250px;
                height: 250px;
                display:inline-block;
            }

            .svg_wrap svg {
               
                pointer-events: none;
            
            }

            .svg_wrap svg text {
                fill: currentcolor;
                pointer-events: auto;
                text-anchor: middle;
                text-transform: uppercase;
            }


            body {background-color: #A8D9E9;}

            .svg_wrap.font1 {font-size: 125%;}

            .color1{color: #66CCCC;}
            .svg_outer {text-align: center;}
            .svg_col {width: 33%;; display: inline-block;text-align: center; min-width: 290px;}


        </style>
    </head>
    <body>
        <div class="svg_outer">
            <div class="svg_col">
                <div class="svg_wrap">
                    <svg viewBox="0 0 200 200" preserveAspectRatio="none">
                    <circle cx="50%" cy="50%" r="49%" stroke="#000066" stroke-width="3" fill="#ffffff" style=""/>
                    <circle fill="transparent" stroke-width="5" stroke="#66CCCC" r="45.5%" cy="50%" cx="50%"/>
                    <text x="50%" y="33%" dy=".3em">Satisfaction</text>
                    <text x="50%" y="50%" dy=".3em" font-size="2.7em"  font-weight="lighter">100%</text>
                    <text dy=".3em" y="67%" x="50%">Guaranteed</text>            <svg>
                    <g transform="scale(0.332 0.332)">
                    <polygon points="236,76 218,135 264,98 208,98 254,135" style="fill:#66CCCC;stroke:purple;stroke-width:0;fill-rule:nonzero;"/>
                    <polygon points="300,70 280,140 333,96 267,96 320,140" style="fill:#66CCCC;stroke:purple;stroke-width:0;fill-rule:nonzero;"/>
                    <polygon points="364,76 346,135 392,98 336,98 382,135" style="fill:#66CCCC;stroke:purple;stroke-width:0;fill-rule:nonzero;"/>
                    </g>
                    </svg>
                    </svg>
                </div>
            </div>
            <div class="svg_col">
                <div class="svg_wrap">
                    <svg viewBox="0 0 200 200" preserveAspectRatio="none">

                    <circle cx="50%" cy="50%" r="49%" stroke="#000066" stroke-width="3" fill="#ffffff" style=""/>
                    <circle fill="transparent" stroke-width="5" stroke="#66CCCC" r="45.5%" cy="50%" cx="50%"/>
                    <text x="50%" y="33%" dy=".3em">Since</text>
                    <text x="50%" y="50%" dy=".3em" font-size="2.7em" font-weight="lighter">2000</text>
                    <svg>
                    <g>
                    <circle style="" fill="#66CCCC" stroke-width="3" stroke="transparent" r="7%" cy="49.11%" cx="15%"/>
                    <circle style="" fill="#66CCCC" stroke-width="3" stroke="transparent" r="7%" cy="49.11%" cx="85%"/>
                    <polygon  style="fill:#ffffff;stroke:purple;stroke-width:0;fill-rule:nonzero;" points="30 87,40 95,35 95,35 113,25 113,25 95,20 95" />
                    <polygon  style="fill:#ffffff;stroke:purple;stroke-width:0;fill-rule:nonzero;" points="170 87,180 95,175 95,175 113,165 113,165 95,160 95" />
                    </g>
                    </svg>
                    </svg>
                </div>
            </div>
            <div class="svg_col">
                <div class="svg_wrap font1">
                    <svg viewBox="0 0 200 200" preserveAspectRatio="none">
                    <circle cx="50%" cy="50%" r="49%" stroke="#000066" stroke-width="3" fill="#ffffff" style=""/>
                    <circle fill="transparent" stroke-width="5" stroke="#66CCCC" r="45.5%" cy="50%" cx="50%"/>
                    <text class="color1" x="50%" y="20%" dy=".3em">$ $ $</text>
                    <text  x="50%" y="43%" dy=".3em" >Within</text>
                    <text dy=".3em" y="60%" x="50%">Budget</text>
                    </svg>
                </div>
            </div>
        </div>
    </body>
</html>
Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...