How can I display Text around circle. CSS shape-outside

问题

I want to show the text around the Circle I use shape-outside: circle() property but it is not giving me the result i want to display two containers first is "class circal" which is used to display image second is "Class blank_circale" which is for display the text I want the text in "Class blank_circale" rounder around "class circal" div so kindly tell me what is the right way to achieve this and sorry for bad English

.patant_contanner {
  width: 90%;
  height: 350px;
  margin: 0px auto;
  background-color: blue;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.circal {
  width: 105%;
  overflow: hidden;
  clip-path: circle(69% at 0% 50%);
  height: 100%;
  background-color: green;
  z-index: 1;
}

.circal img {
  width: 100%;
  height: 100%;
}

.blank_circle {
  z-index: 0;
  width: 133%;
  margin-left: -305px;
  margin-top: -13px;
  height: 108%;
  background-color: white;
  border-radius: 100%;
  shape-outside: circle();
}

<div class="patant_contanner">
  <div class="circal">
    <img src="intro.png">
  </div>
  <div class="blank_circle">

  </div>


  <p> Welcome to the Official Website of Damsna University, Our Institution Is The Most prestigious University in India, Our Institution is granted “A” status By NAAC We approved by <b>UGC Under 2f 12b and also Approved By AICTE</b> (All India Council of
    Technical Education) Welcome to the Official Website of Damsna University, Our Institution Is The Most prestigious University in India, Our Institution is granted “A” status By NAAC We approved by <b>UGC Under 2f 12b and also Approved By AICTE</b>    (All India Council of Technical Education) Welcome to the Official Website of Damsna University, Our Institution Is The Most prestigious University in India, Our Institution is granted “A” status By NAAC We approved by <b>UGC Under 2f 12b and also Approved By AICTE</b>    (All India Council of Technical Education)
  </p>



</div>
</div>

output of Code

回答1:

shape-outside works only with float element so you need to get rid of flexbox:

.patant_contanner {
  width: 90%;
  height: 350px;
  margin: 0px auto;
  background-color: blue;
  overflow: hidden;
}

.circal {
  width: 200px;
  float:left;
  shape-outside: circle(60% at 0% 50%);
  clip-path: circle(60% at 0% 50%);
  shape-margin: 10px;
  height: 100%;
  background: url(https://picsum.photos/id/1000/800/800) center/cover;
}

<div class="patant_contanner">
  <div class="circal">
  </div>
  <p> Welcome to the Official Website of Damsna University, Our Institution Is The Most prestigious University in India, Our Institution is granted “A” status By NAAC We approved by <b>UGC Under 2f 12b and also Approved By AICTE</b> (All India Council of
    Technical Education) Welcome to the Official Website of Damsna University, Our Institution Is The Most prestigious University in India, Our Institution is granted “A” status By NAAC We approved by <b>UGC Under 2f 12b and also Approved By AICTE</b>    (All India Council of Technical Education) Welcome to the Official Website of Damsna University, Our Institution Is The Most prestigious University in India, Our Institution is granted “A” status By NAAC We approved by <b>UGC Under 2f 12b and also Approved By AICTE</b>    (All India Council of Technical Education)
  </p>
</div>

来源：https://stackoverflow.com/questions/58270292/how-can-i-display-text-around-circle-css-shape-outside

标签

html

css

css-shapes