Как реализовать подобное, используя CSS?

Question

[thirteen_bit]

Всем привет! Мне нужно реализовать подобное. Возможно ли такое провернуть pure CSS? (Зеленая область, всё что белое - прозрачное по факту и к объекту не относится)

Answer 1

[Максим]

use svg : https://codepen.io/topicstarter/pen/YMdzJM
use css: https://codepen.io/topicstarter/pen/JVwYPr

Comments

[lamer350]

ну это же не css)

[Максим]

lamer350, на css долго и не кроссбраузерно ...

Answer 2

[lamer350]

Пишите либо на русском, либо на английском. А то выглядит это примерно так
По делу - чисто на css так не сделать, чтобы все кроме зеленого градиента было прозрачным. Разве что белое сделать белым, тогда используйте просто псевдоэлемент и border-radius

Comments

[thirteen_bit]

А коли толку по-русски писать, если у Вас с его пониманием туговато. В вопросе по-русски написано, что белое в элементе не участвует, и быть его не должно.

P.S.: дико каюсь за использование английских слов там, где это может быть оправдано. Порой, вместо "используя только чистый CSS" разработчику проще написать "pure CSS". Может, ещё за использование "sitemap" вместо "карты сайта" пинать будете?

[lamer350]

thirteen_bit, ну ответ на ваш вопрос был дан и так, так как ваша цель не указана и как вы выразились - по факту имеем то что имеем, тут не экстрасенсы сидят.
А касательно английский вставок - может кому и проще, но если у него хватает знаний. Ваших по всей видимости не хватает и приставка pure тут не уместна. Это максимум на какой гугло-перевод сленга тянет.

[Владислав Лысков]

lamer350, прикольное видео, спасибо

[thirteen_bit]

lamer350, экстрасенсы, может, и не сидят, но пустозвонов предостаточно. Пока Вы, уважаемый, распространялись о высоком, Максим Ленский умудрился запилить решение на CSS, альтернативой выдав вариант с использованием SVG.

Как итог: ответ мне дан, но, увы, не Вами. Удачи в поучении английскому под тегом CSS.

[lamer350]

thirteen_bit, увы, но вы настолько слепы что не видите на собственной картинке градиент зеленого и решение Максима на css эту задачу не решит, от этого и отталкивался.

[lamer350]

thirteen_bit, суть претензии в том что вопрос решается не только для вас, происходит вклад с сообщество. Вам же дан был ответ на ваш же вопрос, вас просили уточнить суть задачи чтобы дать лучшее решение.

[thirteen_bit]

вас просили уточнить суть задачи

Да ну? И где же?) Что-то я ничего кроме подъ*бки, тупого гонора и ответа на "отъ*бись" от Вас не увидел.