Мислете извън кутията с CSS форма отвън

CSS е базиран на кутия модел. Ако имате изображение, което е кръг, около който искате да обгърнете текст, то ще се увие около ограничителното поле на изображенията.

Форма отвън

Ново свойство на CSS, наречено shape-outside, ви позволява да обвивате текст, който съответства на формата на вашето изображение.

Какво е външната форма

Shape-outside е ново свойство на CSS, което променя формата на елементите, които са опаковани. Вместо да се ограничава до правоъгълно ограничаващо поле около изображението, shape-outside ни позволява да оформяме съдържанието така, че да отговаря на изображението.

Ето как MDN описва външната форма:

Най- форма-външен CSS имота използва форма стойности, за да се определи площта на поплавък за плувка и ще предизвика инлайн съдържание, за да обгърне с формата вместо гранична кутия на поплавъка.

Най-важното изваждане от това описание е, че това ново свойство се отнася за изображения, които използват поплавък. Свойството CSS за външна форма контролира как текстът се увива около всяко плаващо изображение. Опакованият текст може да има формата на кръг, елипса, правоъгълник или многоъгълник.

Използване на външна форма

Свойството „външна форма“ приема „основна форма“ и прилага функция към него. Функцията за форма се използва за промяна на формата на плаващата област на формата. Свойството CSS за външна форма предоставя функционалност за създаване на следните функции за фигури:

  • кръг
  • елипса
  • многоъгълник
  • правоъгълник
  • URL адрес

Изображението може да се позиционира с тези стойности. Стойностите се добавят в края:

  • margin-box
  • подложка-кутия
  • гранична кутия

Изображението трябва да има вътрешни размери. Трябва да зададете височината и ширината на елемента. Това ще се използва от функцията за фигура за създаване на координатна система, която се използва при обвиване на текст около изображението.

Кръг

Circle () е една от функционалните стойности, предоставени с външна форма. Пълната нотация за кръг () е окръжност (r при cx cy), където r е радиусът на окръжността, а cx и cy са координатите за центъра на окръжността. Ако ги пропуснете, центърът на изображението ще се използва като стойности по подразбиране.

Ето пример за използване на външна форма на кръг:

.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();}

Елипса

Ellipse е вариант на кръга, при който елементът е удължен или по хоризонталната, или по вертикалната ос. Пълната нотация за елипса () е елипса (rx ry при cx cy), където rx и ry са радиусите за елипсата, а cx и cy са координатите за центъра на елипсата.

Ето пример за използване на външна форма на елипсата:

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

Многоъгълник

Функцията многоъгълник осигурява неограничен набор от форми. Пълната нотация за полигон () е многоъгълник (x1 y1, x2 y2, ...)където всяка двойка определя координатите xy за връх на многоъгълника. За да използвате функцията polygon (), трябва да посочите минимум 3 двойки връх.

Полигонът се използва с клип-път. CSS свойството clip-path създава регион за изрязване, който определя каква част от елемент да се показва. Всичко в региона се показва, докато тези отвън са скрити.

Ето пример за използване на фигура отвън за създаване на две триъгълни фигури и текстът тече между тях:

.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}

Поддръжка на браузър

Външната форма на CSS се поддържа предимно от Chrome, Opera и Safari.

Вземете кода

Кодът за всички примери може да се намери в моето репо github тук.

Още статии

Благодаря, че прочетохте статията ми. Ако ви харесва, моля, щракнете върху иконата на пляскане по-долу, така че другите да намерят статията. Ето още някои от моите статии, които може да ви интересуват:

Ето 5 оформления, които можете да направите с FlexBox

Широчина Първо търсене в JavaScript

Модели за инстанциране в JavaScript