Как в CSS сделать такую шкалу?

Question

[LICVIDE]

Как сделать такую шкалу заполнения, если с помощью тега , то края получатся плоскими, как сделать их под таким же наклоном?

Answer 1

[salk15]

border-radius - поможет

<style>
.parrent{
	width: 200px;
	height: 5px;
	background: #f2f2f2;
	margin: 5px;
}
.child{
	height: 100%;
	background: #5176a7;
	border-bottom-right-radius: 10px;
}
.html{
	width: 70%;
}
.php{
	width: 48%;
}

</style>

<div class="parrent">
	<div class="child html">
	</div>
</div>
<div class="parrent">
	<div class="child php">
	</div>
</div>

Answer 2

[Ivan Bogachev]

если с помощью тега , то края получатся плоскими, как сделать их под таким же наклоном?

Не использовать нативный progress bar, а написать свой - codepen