Я не понимаю как правильно задать ширину как на макете: паддингами или шириной высотой?
Если я паддингами задаю то элемент слишком большим получается, а если шириной и высотой, то слишком маленьким, хоть пускай и с размером изображения
Разницу можете видеть на скриншоте:

Еще , я не могу понять как сделать треугольник в виде плеера
<div class="works__block">
<div class="circle__inner">
<a href="" class="player__button">
<div class="circle">
<div class="player__circle">
<div class="player">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="works__card">
<p class="works__subtitle">We provide design and build <br>
for commercial building, <br>
interior and furniture to improve <br>
the better life. </p>
</div>
.works__block {
background-image: url('./images/work-image.png');
background-repeat: no-repeat;
width: 1063px;
height: 350px;
}
.works__card {
width: 549px;
height: 350px;
background-color: #CCF0E6;
margin-top: -350px;
margin-right: -20px;
float:right;
border-radius: 0px 10px 10px 0px;
}
.circle {
width: 128px;
height: 128px;
background-color: #FFFFFF66;
border-radius: 65px;
display: flex;
justify-content: center;
align-items: center;
}
.player__circle {
width: 100px;
height: 100px;
background-color: #FFFFFF;
border-radius: 65px;
}
.player {
}
.circle__inner {
display: flex;
justify-content: flex-end;
align-items: center;
}