before와 after을 이용한 가운데 펀칭효과 css

보통은 위와같은 이미지를 만들 때 직접 이미지를 이용하고 css를 이용하지 않는 편이다.

그리고 저러한 이미지보다는 border-radius를 이용한 모서리부분을 조절하는 경우가 대다수이다.

위와 같은 이미지를 만들기 위해서는 ::before와 ::after 속성을 이용하면 쉽게 해결 할 수 있다.

http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

위의 링크에 아주 자세하게 before와 after 가상 요소들의 설명이 포함되어있다.

#box-hole{

height: 24px;

width: 70px;

background: #333;

text-align: center;

position: relative;

display: flex;

flex-direction: column;

justify-content: center;

margin-left: 35px;

}

#box-hole:before {

content: "";

height: 30%;

width: 30%;

position: absolute;

background: #f5f4f3;

border-radius: 50%;

left: -25%;

}

#box-hole:after {

content: "";

height: 30%;

width: 30%;

position: absolute;

background: #f5f4f3;

border-radius: 50%;

right: -25%;

}

위의 css를 이용하여 한번 해결해보고 위의 속성속의 값들을 조절해가며 여러 css를 구현해보자.