[html css] 선택자 after 속성으로 다이아몬드 꼬리 만들기.

 

선택자에 

::after 

를 추가해서 빈칸을 만들어 도형 혹은 텍스트등의 객체를 만들 수 있다.

 

input[type=radio]:checked +label::after {
    content: ''; 
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background-color: #c30e2e;
}

---

input[type=radio]:checked +label::after {
    content: '';   (빈칸:텍스트없음)
    display: block; (블럭속성)
    width: 20px; (폭)
    height: 20px; (높이)
    position: absolute; (포지션 : 원하는 공간에 붙이기 위해/상위 객체의 포지션에 relatve 속성을 줘야함.)
    right: -10px; ( 왼쪽끝에서 반대로 나가도록 위치잡음)
    top: 50%; (상하 가운데)
    transform: translateY(-50%) rotate(45deg);  (본인크기만큼 y 축(상하) 가운데로 이동 / 45도로 돌려줌)
    background-color: #c30e2e; (배경색)
}

 

돌아간 사각형 객체를 추가할 수 있다.

 

응용하여 아래와 같은 칸꼬리를 만들 수 있다.