Не могу понять как сверстать данный блок?

Question

[Кирилл]

верстаю шаблон не могу понять как правильно сверстать данный элемент

Comments

[Сергей delphinpro]

https://jsfiddle.net/bk4gu09x/

[Сергей delphinpro]

суть метода - https://jsfiddle.net/bk4gu09x/1/

Answer 1

[Danila]

https://codepen.io/DNLHC/pen/RVjaQp

Comments

[Кирилл]

спасибо большое на примере намного лучше понимать.

[Андрей Федоров]

Данила не стыдно вам человека stylus'ом пугать? Ему с обычным css разобраться...

[Danila]

Кирилл: Если со stylus не знаком, там есть кнопка View compiled с css

[Кирилл]

Данила: спасибо

Answer 2

[Максим]

это картинка :

даже URL говорит о этом в css :

.topline-child {
	height: 45px;
	background: url("http://asu4fun.ru/top-left.png") no-repeat scroll left top #333333;
	
	margin: 0 auto;
	max-width: 980px;
	width: 100%;
}

Comments

[Кирилл]

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

[Максим]

Кирилл: что такое пикча ? вы хотите это сделать без изображения ?

[Кирилл]

Максим Ленский: картинка png

[Максим]

Кирилл: ну так это в любом графическом редакторе - типа фотошоп гимп ...prtsc и вставить в перечисленное и стереть не нужное или вообще с ноля рисовать .. но можно и на css сделать ... не так сложно .. на 3 из 10

[Максим]

Кирилл: https://codepen.io/Geyan/pen/jmaqQX?editors=0110 вот смотри

[Кирилл]

Максим Ленский: спасибо за помощь

Answer 3

[Андрей Федоров]

Масса способов... Такой:
transform: skewX(45deg);
или такой:

background-image: linear-gradient(45deg, white 50%, black 50%);

Comments

[Кирилл]

больше интересует вопрос как с одной стороны сделать фон белым а с другой чтоб был серый?

[Кирилл]

если я делаю заливку .topline в css белым то получается что у меня только в центре серая полоса topline-child как сделать чтоб было как на скриншоте

[Андрей Федоров]

в первом случае задайте серый цвет фона блоку, а его родителю белый...
во втором случае, white и black - это в данном случае цвета, белый и черный. вместо черного сделайте серый.
вы не поняли сути решений? предлагаю разобраться вначале, а как разберетесь вопросы про цвета сами пропадут.