사용자 정의 드롭다운 화살표

Question

선택 태그의 드롭다운 화살표를 4개 요소로 구성된 맞춤 화살표로 변경할 수 있나요? 저는 다음과 같이 보이길 원합니다. 왼쪽에 3개의 수평선이 있고 오른쪽에 아래쪽 화살표가 있습니다

나는 하나의 요소(가로선)로 이 효과를 성공적으로 달성했습니다

.select-wrapper::before {
        내용: "";
        위치: 절대;
        최고: 50%;
        디스플레이: 블록;
        너비: 9px;
        높이: 2px;
        배경: 검정색;
    }

Answer 1

나는 당신이 이 CodePen과 비슷한 효과를 얻고 싶어한다고 믿습니다. 코드는 거의 전적으로 이 질문에 대한 SVNM의 답변에서 나왔습니다.

이 답변에서 편집

이미지를 사용하여 설명하는 선/화살표를 만드세요. SVG 사용 방법을 알고 있다면 더 나을 수도 있습니다
배경 이미지 위치 및 크기 조정

샘플 HTML

으아악

CSS

으아악