Как сделать кривую линию вместе с прямой?

Опиши подробнее контекст задачи, тебе нужен один такой элемент, или это часть оформления? Возможно подойдёт канвас, в html такое будет только с костылями.

Можно конечно сделать два блока вне основного потока с одним бордером у каждого и rotate. Но возможно разумнее будет использовать svg

+1. Всё это делается используя svg, в том числе и надпись.

Если хочется потом задать через CSS, то примерно так:

background-image: url("data:image/svg+xml;base64,...");
background-repeat: no-repeat;
width: ...;
height: ...;

с помошью svg через path нарисуй