Wrapping a text around a circular element
See this post by Chris Coyier in which he separates each character of text into <span>s and rotates each one in turn using CSS rotation:
.char1 {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.char2 {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
...etc
Or use Dirk Weber's csswarp.js Service which pretty much does the same but uses javascript to generate the html and css for you. (csswarp.js on GitHub)
Or use SVG text on a path as in this example from useragentman.com
<svg id="myShape" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1"
fill="none" stroke="black" stroke-width="1"
d="M 212,65
C 276,81 292,91 305,103 361,155
363,245 311,302 300,314 286,324
271,332 248,343 227,347 202,347
190,346 174,343 163,339 143,333">
</path>
</defs>
<text id="myText">
<textPath xlink:href="#path1" >
<tspan dy="0.3em">C is for Cookie, That's Good Enough For Me!</tspan>
</textPath>
</text>
</svg>
Or...
Use an image.
How to vertically center text within a circle created with shape-outside?
First I would consider a different idea based on this previous answer then I don't think there is a trivial way to center text with shape-outside because all the common technique will break the float porperty.
One idea is to offset the text with some padding that you calculate dynamially on load and on resize:
$('.e').css('padding-top',($('.e').parent().height() - $('.e').height())/2);$('.e').css('padding-top',($('.e').parent().height() - $('.e').height())/2);
$(window).resize(function() { $('.e').css('padding-top',($('.e').parent().height() - $('.e').height())/2); $('.e').css('padding-top',($('.e').parent().height() - $('.e').height())/2);});div.box { background: #333; color:#fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vmin; height: 100vmin; text-align:justify; border-radius: 50%; overflow:hidden;}
.box >div { height:100%;}
.box >div > div { padding-top: 50px;}
.box:before,.box >div:before { content: ''; float: left; height:100%; width: 50%; shape-outside: radial-gradient(farthest-side at var(--d,right), transparent 98%, red 0); shape-margin:5px;}
.box >div:before { float: right; --d:left;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="box"> <div><div class="e">Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. cies. dolor ipsum tinci dunt place rat in sociis. Pel lentes que ultri cies. cies. dolor ipsum</div></div></div>shape-outside of an image centered between two text blocks
shape-outside can only be used with float element but when making the container a flex one the float property you set will no more be considered.
You can consider two container where you will have a float element in each one and you make both circle overlap to create the illusion of only one:
div.box { font-size: 0; max-width: 600px;}
div.box p { width: 50%; display: inline-block; font-size: initial; vertical-align: top; text-align: justify;}
div.box p:before { content: ""; width: 75px; /*half the height*/ height: 150px; margin-top: 30px; background-image: url(https://picsum.photos/300/300?image=1069); background-size:150px 150px;}
div.box p:first-child:before { float: right; shape-outside: circle(55% at right calc(50% + 15px)); background-position:left; border-radius: 150px 0 0 150px;}
div.box p:last-child:before { float: left; shape-outside: circle(55% at left calc(50% + 15px)); background-position:right; border-radius: 0 150px 150px 0;}<div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat. </p>
</div>wrapping two columns of text around an image/shape from both sides html css
Here is an idea based on this previous answer where I will add the margin factor to control the space between text and image:
div.box { border:1px solid red; margin:5px; font-size: 0; max-width: 600px; --R:100px; /* radius */ --m:5px; /* margin */ --t:10px; /* distance from top */}
div.box p { width: 50%; margin:0; padding:0 var(--m); display: inline-block; vertical-align:top; font-size: initial; text-align: justify;}
div.box p:before { content: ""; width: var(--R); height: calc(2*var(--R)); padding:var(--m) 0 var(--m) var(--m); margin-top:var(--t); background:var(--img) content-box; background-size:200% 100%; shape-outside: circle(var(--R) at var(--d,right) calc(-1*var(--m)) top calc(50% + var(--t)/2)); float: right; border-radius: 500px 0 0 500px; margin-right:calc(-1*var(--m));}
div.box p:last-child:before { float: left; padding:var(--m) var(--m) var(--m) 0; --d:left; background-position:right; border-radius:0 500px 500px 0; margin-left:calc(-1*var(--m)); margin-right:0;}
*,*::before,*::after { box-sizing:border-box;}<div class="box" style="--img:url(https://i.picsum.photos/id/1011/400/400.jpg)"> <p> Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, </p> <p> Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, </p></div><div class="box" style="--img:url(https://i.picsum.photos/id/248/400/400.jpg);--R:80px;--m:10px;--t:30px;"> <p> Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, </p> <p> Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, </p>
</div><div class="box" style="--img:url(https://i.picsum.photos/id/1074/400/400.jpg);--R:150px;--m:2px;--t:30px;"> <p> Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, illum esse veniam eligendi, dolor conseq uuntur iure, </p> <p> Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, illum esse veniam eligendi, dolor conseq uuntur iure, </p>
</div>Issues with wrapping text around a circle shaped div
.jumbotron { background-color: transparent !important;
}
nav {-moz-border-radius-topleft: 0;-moz-border-radius-topright: 0;-moz-border-radius-bottomright: 15px;-moz-border-radius-bottomleft: 15;
-webkit-border-top-left-radius: 0;-webkit-border-top-right-radius: 0;-webkit-border-bottom-right-radius: 15px;-webkit-border-bottom-left-radius: 15px;
}
.navtitle { font-family: 'Prata', serif; font-size: 2.1rem;}
.red { background-color: red;}
.article { -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15;
-webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=fffcd9&density=66&opacity=44); -webkit-box-shadow: 11px 10px 53px -8px rgba(0,0,0,0.36); -moz-box-shadow: 11px 10px 53px -8px rgba(0,0,0,0.36); box-shadow: 11px 10px 53px -8px rgba(0, 0, 0, 0.36);
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60rem; padding: 40px; box-sizing: border-box;
}
.circle { width: 28rem; height: 28rem; border-radius: 50%; float: left; shape-outside: circle(); margin: 30px; background: url(https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1333&q=80); background-size: cover;
}
.title { font-size: 72px; font-family: 'Prata', serif; font-weight: bolder; margin-left: 20px;}
.articlecontent { font-size: 1.1rem; font-family: 'Nunito Sans', sans-serif; margin-left: 10px;
}
#mainsection { margin-top: 28rem; position: relative;}<!DOCTYPE html> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="palebluestyle.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><div class="container"> <nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand mb-0 h1"><span class="navtitle">Pale Blue Dot.</span></span> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Find Articles" aria-label="Search"> <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button> </form> </nav></div>
</head> <body><div class="container" id="mainsection">
<div class="jumbotron mainart"> <div class="article"> <div class="title"><h1>Article Title</h1></div> <div class="circle"></div> <div class="articlecontent"> <p>Qui tempor excepteur ex anim proident. Pariatur veniam non dolore ut eu excepteur veniam. Elit sunt non culpa duis cupidatat laboris cupidatat reprehenderit sint incididunt aliquip occaecat. Dolore consectetur occaecat deserunt sit ullamco ipsum qui ipsum eiusmod eu culpa occaecatdo. Qui enim non sint consequat aliqua anim est laboris anim Lorem incididunt ad in velit. Esse laboris amet laborum enim magna duis Lorem proident commodo ex. Cillum quis irure magna quis dolore. Deserunt tempor aliqua ut laboris cillum dolor cupidatat anim laboris qui. Eu ut sit ut cupidatat. Lorem occaecat aliquip sit et. Veniam do deserunt sint sunt ad et minim nulla in. Et cupidatat culpa nostrud laboris officia fugiat laboris anim excepteur. </p></div> </div></div>
</div> <script src="" async defer></script> </body></html>Wrap Text in a Circle Shape Using HTML CSS
Adding style="transform: rotate(-55deg); transform-origin: center;" to your SVG text seems to work:
.svg {
fill: currentColor;
height: auto;
max-width: 66vmin;
transform-origin: center;
width: 135px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="text-black">
<fieldset>
<div class="bg-gray-200 p-4 mt-2 items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-5 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
<!--new -->
<div class="relative h-full flex justify-center items-center">
<label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute" viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="10" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full">
<img src="https://selection-app.netlify.app/assets/thumbnails/Marula-Oil.png" class="rounded-full" alt="Sample Image">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute bottom-0" data-id="Rosehip Oil">
<div class="flex justify-center transform -translate-y-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white mt-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<!-- <span class="absolute inline-flex items-center p-2 rounded-full text-xs font-medium bg-black text-white mb-2 hidden"> $10 </span> -->
<span class="absolute text-xs sm:text-sm font-medium text-white bottom-0 mt-2"> Smooth </span>
</div>
</div>
<div class="flex justify-center mt-5 mb-5 remove_preview_oil_btn hidden">
<span class="">
<button type="button" class=" border border-red-600 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Remove from cart</button>
</span>
</div>
</fieldset>
</div>Related Topics
How to Apply a CSS Gradient Over a Text, from a Transparent to an Opaque Colour
How to Have Quotation Marks in HTML Input Values
How to Get a Textarea to Stretch to Fit Its Content Without Using PHP or JavaScript
Preventing Canvas Clear When Resizing Window
Alignment of Content Vertically in Adjacent Flexbox Containers
Closing Svg Tags, Explicit or Self Closing
Negative Margin and Background
CSS Filter Not Working in Firefox
Autoplay Audio on Mobile Safari
CSS: Unexpected Vertical Position of "Inline-Block" Elements
How to Get CSS to Select Id That Begins with a String (Not in JavaScript)
Convert Svg Path Data to 0-1 Range to Use as Clippath with Objectboundingbox
CSS Make Div Position Fixed Inside Div with Perspective Propertie
HTML/CSS Set Div to Height of Sibling
Why Do The CSS Width and Height Properties Not Adjust for Padding