[mmprogr]

Jak w css stworzyć linię, która jest zaostrzona ? W sensie jej szerokość się zmniejsza wraz z odległością od środka odcinka
#css #html5 #html #frontend

[Pietras55]

@mmprogr zrób trójkąt w css ;)

[mmprogr]

@Pietras55: W trójkącie nie zmienia się szerokość linii z tego co wiem ( ͡° ͜ʖ ͡°) Mam na myśli coś na wzór włóczni, albo jej samego grotu, żeby linia miała chudszą końcówkę niż jest na całej długości

[Pietras55]

@mmprogr Pokaż proszę co chcesz osiągnąć albo skorzystaj z svg

[Domons]

@mmprogr: jeśli trójkąt z css Ci nie pasuje to nie wiem czy przypadkiem nie chodzi ci bardziej o taką linię, która ma cała 1px ale na końcu jest bardziej "przezroczysta"... jeśli tak to gradientu użyj po prostu

Edit:
a nie, no włócznia no to trójkąt odpowiednio rozciągnij i da radę ogarnąć tylko na 2 elementy żeby przez całą szerokość nie zwężało się

[mmprogr]

@Domons: Właśnie o taki efekt mi chodzi, ale z jednym stałym kolorem i końcówką linii ostrą, tak jak to mniej więcej wygląda używając gradientu

[Domons]

@mmprogr: https://jsfiddle.net/ffw0zfr9/2/ coś takiego?

[mmprogr]

@Domons: Tak, tylko z drugiej strony też zaostrzona, a końcówka nierozmazana i żeby płynnie zmieniała szerokość tzn. bez uskoków

[Domons]

@mmprogr: https://jsfiddle.net/ffw0zfr9/3/ no rozmazanie to już kwestia renderowania przez przeglądarkę... chyba faktycznie lepiej byłoby zrobić to w svg

[mmprogr]

Tak chyba będę musiał zrobić. Dzięki bardzo za pomoc @Domons:

[Oczomyjka]

@mmprogr: a takie cuś:

{ border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }