CSS shaping & border

Question

CSS로이 모양을 할 수 있을지 궁금합니다.

나는 이미지 마스크로 시도했지만 테두리가 문제가되어 배경 이미지 솔루션으로 시도했지만 문제는 다른 장치에 의해 배경 크기였습니다. 상자 안에 텍스트가 포함될 것이므로 .

내가 비슷한 모양을했는지 또는 내가 알고 싶은 추천 기법이 있는지 궁금해한다.

고맙습니다.

Answer 1

다음은 CSS와 이미지가없는이 모양을 구현할 수있는 방법을 보여주는 데모입니다. 의사 요소를 추가하고 절대 위치를 지정했습니다.

신체 배경이 다른 색상 인 경우 환상을 유지하려면 ::before의 색상을 변경해야합니다.

궁금한 점이 있으면 알려주세요.

#box { 
 
    height: 100px; 
 
    background: #f7f7f7; 
 
    border: 2px solid #e4e4e4; 
 
    border-radius: 10px; 
 
    position: relative; 
 
} 
 

 
#box::before { 
 
    background: white; 
 
    content: ''; 
 
    position: absolute; 
 
    top: -2px; 
 
    left: -2px; 
 
    width: 35px; 
 
    height: 30px; 
 
    border-radius: 0 0 20px 0; 
 
    border-right: 2px solid #e4e4e4; 
 
    border-bottom: 2px solid #e4e4e4; 
 
}

<div id="box"></div>