Как сверстать? Помогите новичку!

[dieie]

Как сверстать данную область? А именно линии

Edited May 9, 2018 by dieie

[WebNewbe]

Не знаю насчет градиента, я делал так:
данный прогресс бар делал блоком закрашивал соответственно в серый цвет, и накладывал псевдэлемент ::before, который по высоте равняется данному прогресс бару, а ширина уже от задачи, если у вас 75%, просто прописываете width: 75% ну и соответственный цвет, вот и все, по-моему довольно легки вариант)

https://codepen.io/anon/pen/yjvwMR

Edited May 9, 2018 by WebNewbe

[klierik]

На чистом CSS гибко такое, скорее всего, не сделать. Для заполнения линии понадобится собственный элемент. Как вариант: https://jsfiddle.net/klierik/0ax66zqs/

[DivMan]

градиентом 

[dieie]

17 minutes ago, DivMan said:

градиентом 

Как именно?

[dieie]

2 hours ago, klierik said:

На чистом CSS гибко такое, скорее всего, не сделать. Для заполнения линии понадобится собственный элемент. Как вариант: https://jsfiddle.net/klierik/0ax66zqs/

Спасибо)

[DivMan]

4 часа назад, dieie сказал:

Как именно?

https://jsfiddle.net/n69pbhdb/

<div>
  <p style="font-weight: bold;">Скил 1</p>
  
	<p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 75%, #f5f5f5 10%);">
  </p>
	</div>
  
  <div>
  <p style="font-weight: bold;">Скил 2</p>
  
	<p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 90%, #f5f5f5 10%);">
  </p>
	</div>
  
  <div>
  <p style="font-weight: bold;">Скил 3</p>
  
	<p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 65%, #f5f5f5 10%);">
  </p>
	</div>
					

.gradient {
	width: 100%;
	height: 5px;
	background: #337AB7; 
	border-radius: 5px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

 

position:relaive можно убрать, это для другого 

Edited May 9, 2018 by DivMan

[dieie]

42 minutes ago, DivMan said:

https://jsfiddle.net/n69pbhdb/

<div>
  <p style="font-weight: bold;">Скил 1</p>
  
	<p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 75%, #f5f5f5 10%);">
  </p>
	</div>
  
  <div>
  <p style="font-weight: bold;">Скил 2</p>
  
	<p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 90%, #f5f5f5 10%);">
  </p>
	</div>
  
  <div>
  <p style="font-weight: bold;">Скил 3</p>
  
	<p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 65%, #f5f5f5 10%);">
  </p>
	</div>
					

.gradient {
	width: 100%;
	height: 5px;
	background: #337AB7; 
	border-radius: 5px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

 

position:relaive можно убрать, это для другого 

Спасибо)

[Колхозник деревенский]

6 часов назад, WebNewbe сказал:

Не знаю насчет градиента, я делал так:
данный прогресс бар делал блоком закрашивал соответственно в серый цвет, и накладывал псевдэлемент ::before, который по высоте равняется данному прогресс бару, а ширина уже от задачи, если у вас 75%, просто прописываете width: 75% ну и соответственный цвет, вот и все, по-моему довольно легки вариант)

https://codepen.io/anon/pen/yjvwMR

А через JS можно достучаться до before, after ?

[dieie]

14 hours ago, WebNewbe said:

Не знаю насчет градиента, я делал так:
данный прогресс бар делал блоком закрашивал соответственно в серый цвет, и накладывал псевдэлемент ::before, который по высоте равняется данному прогресс бару, а ширина уже от задачи, если у вас 75%, просто прописываете width: 75% ну и соответственный цвет, вот и все, по-моему довольно легки вариант)

https://codepen.io/anon/pen/yjvwMR

Спасибо, помогли)