도로 표지판(끝이 있는 직사각형) 형태의 버튼을 만들고 싶습니다.

각 텍스트의 길이가 다른 텍스트를 로고에 동적으로 쓰고 싶습니다. 그래픽만 배경 그래픽으로 사용하여 이 작업을 시도하면 그에 따라 화살표의 크기가 조정되고 압축/늘어납니다. 따라서 텍스트를 일반 div에 넣고 CSS :after를 사용하여 화살표를 SVG로 추가하세요. 화살표는 완전히 채워져야 합니다. 즉, 프레이밍 문제를 다룰 필요가 없습니다. (가시성을 높이기 위해 SVG를 검정색으로 두었습니다) 내 첫 번째 문제는 화살표가 항상 블록 뒤에 있지 않고 블록 안에 있다는 것입니다. 저는 position:absolute;를 사용하여 이 문제를 해결했습니다. 하지만 왼쪽 블록과 오른쪽 블록의 끝을 기준으로 위치를 지정할 수 없어 추가 미세 조정에 실패했습니다

질문:

• 삼각형이 항상 상자 끝에 정확히 연결되도록 배치하려면 어떻게 해야 하나요? (가운데 흰색 없음)

• 상자 크기(높이)에 따라 SVG 크기를 조정하는 방법입니다. (가장자리가 맞도록) (패딩도 고려할 수도 있음)

으아아아 으아아아