Form-utanför - CSS-tricks

Anonim

De shape-outsidestyr fastighets hur innehållet kommer att linda runt en flöt elements omgivande rutan. Vanligtvis är detta så att texten kan flyta över en form som en cirkel, ellips eller en polygon:

.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )

Det är viktigt att notera att den här egenskapen bara fungerar på flytande element för närvarande, även om detta sannolikt kommer att förändras i framtiden. Den shape-outsideegenskapen kan också manipuleras med övergångar eller animationer.

Värden

  • circle(): för att göra cirkulära former.
  • ellipse(): för att göra elliptiska former.
  • inset(): för att göra rektangulära former.
  • polygon(): för att skapa vilken form som helst med 3 eller fler hörn.
  • url(): identifierar vilken bild som ska användas för att radera text.
  • initial: flottörområdet är opåverkat.
  • inherit: ärver shape-outsidevärdet från föräldern.

Följande värden identifierar vilken referens i rutmodellen som ska användas för att placera formen inom:

  • margin-box
  • padding-box
  • border-box

Dessa värden ska läggas till i slutet, t ex: shape-outside: circle(50% at 0 0) padding-box. Som standard används margin-boxreferensen.

ellips()

.element ( shape-outside: ellipse(150px 300px at 50% 50%); )

Den ellipse()funktion kräver radierna värden för x, till y-axeln hos ellipsen följt av koordinaterna placera centrum av formen inom dess begränsningsram. Exempelvis ovan kommer exemplet att placera centrum av ellipsen i divets vertikala och horisontella centrum .element:

Även om demo ovan kan föreslå att vi ändrar själva formen div, om vi lägger till gränser och en bakgrundsbild kommer vi att upptäcka att avgränsningsrutan faktiskt fortfarande är rektangulär:

Det kan vara bättre att tänka på det här: med shape-outsideegenskapen ändrar vi förhållandet mellan andra element runt ett element, inte själva elementets geometri. För att fixa det måste vi använda shape-outsidebredvid clip-path()egenskapen, som i det här exemplet:

cirkel()

.element ( shape-outside: circle(50%); )

Den här funktionen skapar en cirkel, och i kodexemplet ovan skapas en cirkel med en radie som är halva höjden och bredden av .element. Den circle()funktionen kan också använda samma syntax för positionering av formen inom.

url ()

.element ( shape-outside: url('circle.png.webp'); )

I det här fallet har vi två flytande bilder, en på vardera sidan av ett textblock. Eftersom båda bilderna har shape-outsideegenskapen inställd kommer texten nedan att undvika de två flottörerna.

Det är också möjligt att ställa in shape-image-thresholdegenskapen som informerar webbläsaren vilka pixlar, beroende på deras transparens, ska skapa formen. Till exempel:

.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )

I det här exemplet måste de enda pixlar som skapar formen ha 50% transparens och högre. Värden från 0.0(transparent) till 1.0(ogenomskinlig) är giltiga.

polygon()

.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )

Denna funktion skapar vilken form som helst som har tre eller flera hörn, till exempel:

Det är viktigt att notera att om den här egenskapen kommer att animeras kräver det samma antal hörn när du deklarerar det animerade tillståndet:

.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )

infälld ()

.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )

inset()är en funktion för att skapa rektangulära former, det tar fem parametrar men den femte, för border-radiusär valfritt. De andra argumenten är förskjutna inåt från kanten av .element:

Ovan har vi ett element som är 200px brett och 200px långt och vi kompenserar formen inom 50px i alla riktningar utom vänster sida. På detta sätt kommer texten att vikas över formen även om div sträcker sig till toppen.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
37 62 Nej 79 7,1 *

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
88 85 81 8 *