대화 상자를 구현하는 순수 CSS

상자의 길이와 너비가 0이면 네 개의 테두리가 서로 닿아 단단해지며 각 테두리는 삼각형을 사용하여 대화 상자의 뾰족한 턱을 구현할 수 있습니다.

왼쪽 위 테두리를 색칠하고 오른쪽 아래 테두리를 투명하게 설정하여 #demo:before에 아래쪽 정삼각형을 배치하고 위쪽이 큰 상자의 아래쪽 테두리와 절대 일치하도록 위치를 지정합니다. .
그런 다음 왼쪽 상단 테두리를 흰색으로, 오른쪽 하단 테두리를 투명하게 설정하여 큰 삼각형 안에 작은 흰색 삼각형을 배치하여 색상의 일부를 덮어 뾰족한 턱을 만듭니다.
은 #demo:before 및 #demo:after 의사 요소를 사용하여 구현할 수도 있고, 큰 상자 안에 작은 상자를 배치한 다음 절대적으로 배치할 수도 있습니다.

html 코드:

<p></p>

css 코드:

#demo {
    width: 200px;
    height: 100px;
    background:#FFF;
    border: 8px solid #666;
    border-radius: 30px;
    box-shadow: 2px 2px 4px #888;
    position: relative;
}
            
#demo:before {
    content:"";
    position: absolute;
    left: 30px;
    top: 100px;
    border: 25px solid;
    border-color: #666 transparent transparent #666;
}
            
#demo:after {
    content:"";
    position: absolute;
    left: 38px;
    top: 100px;
    border: 15px solid;
    border-color: #FFF transparent transparent #FFF;
}

주의해야 할 몇 가지 세부정보가 있습니다.

1. #demo:after 색상이 있는 테두리는 상자의 배경색과 동일해야 하므로 상자의 배경색을 투명하지 않게 설정해야 합니다. 여기서는 상자의 배경을 테두리와 동일한 흰색으로 설정했습니다.

2. 여기에는 테두리에 width:0px;height:0px;을 설정할 필요가 없습니다. 그렇지 않으면 테두리가 선으로 늘어납니다.

3. 아래 그림과 같이 검은색 삼각형의 두 테두리에서 흰색 삼각형의 두 테두리를 뺀 값은 (c+d)와 같고, 미관상 d는 다음과 같아야 합니다. a와 거의 같습니다(c는 정수여야 하므로 a는 정수가 될 수 없음). 여기서 몇 가지 계산이 필요합니다.
   

대화 상자의 순수 CSS 구현과 관련된 더 많은 기사를 보려면 비용을 지불하세요. PHP 중국어 웹사이트에 주목하세요!