Как я могу отобразить текст вокруг круга. CSS shape-outside - PullRequest
Новая
       48

Как я могу отобразить текст вокруг круга. CSS shape-outside

4 голосов
/ 07 октября 2019

Я хочу показать текст вокруг круга. Я использую свойство 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>

output of Code

1 Ответ

3 голосов
/ 07 октября 2019

shape-outside работает только с плавающим элементом , поэтому вам нужно избавиться от 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>
...