CSS Transform приходит на помощь, вот пример:
.title-head {
transform: perspective(224px) rotateX(-20deg);
width: 358px;
height: 80px;
background-image: linear-gradient(180deg, #d6c0a6 0%, white 100%, #ff3f00 100%, white 100%);
margin: 0 auto;
}
<div class="title-head"></div>
Если надо, чтобы поверх был текст, делаем что то вроде:
.container {
position: relative;
margin: 2% auto;
width: 358px;
}
.title-head {
transform: perspective(224px) rotateX(-20deg);
position: absolute;
z-index: 1;
top: 0;
width: inherit;
height: 80px;
background-image: linear-gradient(180deg, #d6c0a6 0%, white 100%, #ff3f00 100%, white 100%);
}
.text {
position: relative;
z-index: 2;
top: 0;
width: 100%;
margin: 0 auto;
padding: 5.5% 3%;
font-size: 1.4em;
font-family: Arial;
color: #5D1600;
text-align: center;
}
<div class='container'>
<div class='text'>Заголовок</div>
<div class='title-head'></div>
</div>