Разница между свойствами пути обрезки и формы снаружи

Question

Я знаю, что clip-path используется для создания маски элемента, но я не уверен в разнице между clip-path и shape-outside свойством и могут ли они использоваться вместе

Answer 1

Оба "создают невидимые слои", но для разных целей.

clip-path : это «обрезать» элемент, создавая поверх него маску, которая покрывает части, которые вы не хотите показывать. Это не влияет на то, как элементы вокруг него плавают (они все еще имеют поле для справки)

outside-shape : Создайте невидимый слой вокруг элемента, из которого плавают онлайн-элементы вокруг него (теперь они имеют пользовательскую форму в качестве ссылки). external-shape не вырезает элемент и не влияет на его внешний вид.

Примечание. На этом изображении видно, как текст плавает вокруг созданной внешней формы (фиолетовый)

Оба могут отлично использоваться вместе.

css-shape-editor - это удивительное расширение / инструмент, который может помочь вам работать с обоими свойствами https://www.youtube.com/watch?v=zdWsBZiGiZc

Answer 2

Свойства CSS shape-outside определяют, что происходит вокруг элемента, в то время как путь клипа применяется к этому элементу.

Таким образом, если у вас есть элемент div, он по умолчанию является блоком (в зависимости от прямоугольника или квадрата). Вы можете применить радиус границы 50% к div, и это сделает его круглым, но любые элементы вокруг кругового div будут по-прежнему выглядеть как квадрат. Если вы хотите, чтобы текст повторял изгибы окружности, вам нужно применить внешние свойства формы к элементу div.

Свойства пути обрезки предотвращают отображение определенных областей элемента вместо отображения всей области.

В теории вы можете использовать их вместе в зависимости от результата, которого вы пытаетесь достичь.

круг Div показывает, как элементы рядом с ним не обтекают круг

<div class="wrapper">
   <div id="circle"></div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Maxime illum iure ab minus. Fugiat necessitatibus consequatur 
          eos minus quo, tempora iusto ratione magnam quidem voluptate 
          molestiae minima dignissimos iste facere? 
      </p>
    </div>

CSS

#circle{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
   border-radius: 50%;
   }

.wrapper{
   width: 300px;
 }

Элемент, показывающий, как текст обтекает круг.

   <div class="wrapper">
       <div class="circle"></div>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
           Maxime illum iure ab minus. Fugiat necessitatibus consequatur 
           eos minus quo, tempora iusto ratione magnam quidem voluptate 
           molestiae minima dignissimos iste facere? 
         </p>
      </div>

CSS

.wrapper{
  width: 300px;
 }


.circle {
   height: 200px;
   width: 200px;
   border-radius: 50%;
   background-color: #7db9e8;
   margin: 0 25px 5px 0;
   float: left;
   -webkit-shape-outside: circle();
   shape-outside: circle();
 }