Как сделать такое лого используя чистый css?

Question

[1nsayt]

Возможно ли сделать такое решение посредством градиента?Подскажите пожалуйста какие решение есть для верстки такого логотипа.Можно наверно еще сделать посредством after и before.

Comments

[Lord_Dantes]

Легко, куча дивок флекса немножечько и все.

Answer 1

[RAX7]

Comments

[1nsayt]

А внтури градиентов можно задавать тени,к примеру если мне нужно будет задать тень внутри этого цвета тень #eeedef?

[RAX7]

1nsayt, нет, но можешь сымитировать тень другим градиентом

Answer 2

[DanKud]

На псевдоэлементах можно так - https://codepen.io/anon/pen/KjZVWg?editors=1100#0

Comments

[origami1024]

самую сложную часть - тень не заметил?

Answer 3

[Hyubert]

Градиентом можно, но псевдоэлементами будет больше контроля, хотя выбор всегда за вами.
Вот накидал небольшой пример

Comments

[1nsayt]

Значит внтури градиентов не получится задать тень?Вы про такой случай имеете ввиду?

[Hyubert]

1nsayt, получиться, но только с помощью математики и абсолютного позиционирования, и все равно придется использовать before

Или как показали в примере выше... имхо - такой способ мне не нравиться (с усложнением логотипа будет расти и сложность градиента, а если захотите анимировать?)

Answer 4

[Антон Усачев]

Comments

[origami1024]

Вот этот парень использует инсайдерскую инфу, что наклон тени должен быть 178 градусов)

Answer 5

[alex-1917]

Фанатам градиентов:
Градиенты относятся не к свойствам, а к значениям и могут применяться везде, где используются изображения, включая свойства background-images, list-style- images и border-images.
Градиент является CSS-изображением, созданным браузером на основе определенных разработчиком цветов путем постепенной смены одного цвета на другой.
При создании радиального градиента он весь помещается в память. Если радиальный градиент небольшой, одноцветный, без прозрачности или ступенчатых переходов, объем затрачиваемой памяти будет небольшим. Но такие градиенты используются довольно редко. Линейные градиенты представляют собой небольшие изображения, которые выкладываются в памяти браузера, как плитки, а радиальные градиенты являются одним более крупным изображением, которое может занять много памяти и даже вызвать сбой мобильных браузеров на устройствах с ограниченным объемом оперативной памяти.

Или так https://habr.com/ru/post/243909/
Или тут CSS background linear-gradient fixed сильно грузит CPU при прокрутке, как пофиксить?
Ясно, да?

Answer 6

[Roma741]

<style>
	.wraper{
		width: 200px;
	}
	.blue{
		width: 100%;
		height: 50px;
		background:blue; 
	}
	.grey{
		width: 50%;
		height: 50px;
		background: grey;
		float:left;
	}
	.pink{
		width: 50%;
		height: 50px;
		background: pink;
		float:left;
	}
</style>
<div class="wraper">
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="pink"></div>
	<div style="clear:both"></div>
</div>