Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailemVyřešeno [CSS] border linear gradient

Zdravím,

vie niekto ako urobiť v CSS to že bych mal nejaký element ohraničený borderom nasledovným spôsobom:

border mám na lavej a pravej strane elementu, obe sú 4px široké. V lavom bordery chcem prvé 2 pixely bielou farbou, a druhé 2 pixely čiernou farbou. V pravom bordery chcem prvé 2 pixely čiernou farbou, a ďalšie 2 pixely bielou farbou...

môj momentálny CSS kód:


.el {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-image: linear-gradient(to left, #000000 2px, #ffffff 2px); // chcem aplikovať pre ľavý border
	border-image: linear-gradient(to right, #000000 2px, #ffffff 2px); // chcem aplikovať pre pravý border
        border-image-slice: 1; // ???
}

niekde som našiel niečo ako border-left/right-image ale to nefunguje. Tak som hľadal ďalej, zistil som že nič také ako border-left/right-image nieje, ale že sa to dá riešiť cez slice. Tak som slice nastavil na 2, ovšem ani

border-image: linear-gradient(to left, #000000 2px, #ffffff 2px, #ffffff 2px, #000000 2px) 2;

mi nefunguje správne, viete mi poradiť?

Předmět Autor Datum
Prečo tak komplikovano? Buď to spraviť 4px širokým pozadím, kľudne priamo v div elemente. Alebo pove…
pozorovateľ 03.12.2018 12:33
pozorovateľ
pozadim to nejde, pretože pozadie tam už mám kombinovaný linear-gradient a base64 data uri image png…
Mlocik97 03.12.2018 13:37
Mlocik97
Hmm, asi by som skúsil cez tieň: box-shadow: -2px 0 0 0 #000, -4px 0 0 0 #fff, 2px 0 0 0 #000, 4px…
moose 04.12.2018 06:32
moose
dík,... avšak s CSS Gridom mi to nefunguje, žiadny "okraj" sa nevykreslí.
Mlocik97 04.12.2018 16:07
Mlocik97
tak pod boxshadow jeste pridej border: 4px transparent;
Božek 04.12.2018 16:39
Božek
skúšal som a nič, tak som skúsil debugovať, zrejme to budem musieť mať cez border, kedže shadow sa z…
Mlocik97 04.12.2018 17:09
Mlocik97
A prečo nedáš tie dva okraje ako som spomínal? Ten float predsa na to nebude mať vplyv, plávať bude…
pozorovateľ 04.12.2018 17:40
pozorovateľ
pretože v mojom prípade by tvoj navrhnutý spôsob bol sakra komplikovanej... môj CSS je miešanina Gri… poslední
Mlocik97 04.12.2018 17:52
Mlocik97

pozadim to nejde, pretože pozadie tam už mám kombinovaný linear-gradient a base64 data uri image png. obalením taky nemohu lebo float obtékaní. A krom toho nechcem zbytocne nafukovať veľkosť obrázkom. A taky používam drag & drop prvky vo webstránke, a pri rôznych viewportoch sa mi to rôznak preusporiadáva.

skúšal som a nič, tak som skúsil debugovať, zrejme to budem musieť mať cez border, kedže shadow sa zobrazuje o práve tých 2px posunuté smerom von od elementu, problém je že tam sú už iné elementy s vyšším z-index. Mainu vyšší Z-index nemôžem nastaviť, lebo pri scrollovaní by sa nescrolloval pod tie elementy ale nad tými elementami. Když tam doplním CSS:


    width: 1003px; // vypočítaná veľkosť - 2* šírka "okraju".
    left: 4px;
    position: relative;

skrz chrome konzoli, pričom vypočítaná CSS veľkosť bola 1011px. Tak sa správne zobrazia tie okraje, problém je že ja dopredu neznám vypočítanú veľkosť, a teda pri zmene veľkosti viewportu, pri zoomu či zmenení veľkosti písma alebo v prípade viac obsahu než sa zmestí do viewportu a teda vykreslenia obsahu tak že je nutno scrollovať, tak celé toto jde do kytek a žádne okraje nemám, alebo naopak mám okraj niekde v polovici elementu.

Teda potrebujem ten "okraj" vykresliť tak aby z vnútornej strany okraju elementu nie z vonkajšej strany okraju.

V prípade borderu když mám len jednofarebný okraj tak mi to funguje presne jak potrebujem, len práve že ja bych chcel vytvoriť dvojfarebný okraj...

pretože v mojom prípade by tvoj navrhnutý spôsob bol sakra komplikovanej... môj CSS je miešanina Gridov, Flexboxov, Floatov, Positioningu, Marginu a paddingu. A navyše do toho "šťúram" javascriptom. Takže ideálne je to vykresliť bez pridania HTML elementu, a bez zmeny veľkosti či posunutia elementov. Kdyby bolo možné trebárs skrz background linear-gradient() kombinovať to bottom a to left tak by to aj šlo. Inak takto to vidím len na ten border.

Zpět do poradny Odpovědět na původní otázku Nahoru