HTML, CSS 및 SVG를 사용하여 확장 가능한 표지판 만들기

Question

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

으아아아

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

질문:

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

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

아니면 after 접근 방식이 완전히 잘못된 방향에 있는 것인가요? HTML에서 텍스트(텍스트는 로 둘러싸여 있음) 뒤에 직접 화살표(SVG 파일)를 추가하고 모든 것을 로 묶어야 합니까? 하지만 실제로는 이것을 피하고 CSS를 통해 삽입하는 것이 더 좋을 것입니다. 하지만 이것이 더 유용한 방법이라면 괜찮습니다.

으아아아 으아아아

Answer 1

A Haworth가 언급했듯이 클리핑 경로는 더 간단할 수 있습니다. 이렇게 하려면 버튼 오른쪽에 padding ，以便始终为箭头所在的位置留出空间，然后将 clip-path를 추가하고 전체 요소를

에 추가하세요.

으아악 으아악