html - 如何在圆圈周围显示文本。 CSS 形状外部

Question

我想在圆圈周围显示文字 我使用 shape-outside: circle() 属性，但它没有给我结果 我想首先显示两个容器是用于显示图像的“class circal” 第二个是“Class blank_circale”，用于显示文本我想要“Class blank_circale”中围绕“class circal”div 的文本 所以请告诉我实现这一目标的正确方法是什么 抱歉英语不好

.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>

Answer 1

形状外works only with float element所以你需要摆脱 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>