如何在圆周围显示文本。 CSS形状外 [英] How can I display Text around circle. CSS shape-outside

问题描述

我想在Circle
周围显示文本，我使用shape-outside：circle（）属性，但是它没有给我结果
i首先要显示两个容器的是 class circal用于显示图像
第二个是 Class blank_circale，用于显示文本。我希望 Class circal div
中的 Class blank_circale取整文字，所以请告诉我什么是正确的方法达到
并为英语不好而感到遗憾

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>

推荐答案

shape-outside 仅适用于float元素，因此您需要摆脱flexbox：

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>

这篇关于如何在圆周围显示文本。 CSS形状外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！