CSS 의사 요소를 사용하여 삼각형이 있는 툴팁을 생성하는 구현 기술

다음 편집기는 CSS 의사 요소를 사용하여 삼각형이 있는 프롬프트 상자를 만드는 구현 방법을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집기를 따라가서 살펴보겠습니다.

CSS 의사 요소는 중복된 DOM 요소 없이 몇 가지 일반적인 기능을 구현하는 방법을 제공합니다.

DOM 구조는 다음과 같습니다.
해당 CSS 스타일은 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

<p class="tooltip-wrapper bottom">    
    <p class="arrow"></p>    
    <p class="content">    
        This is content    
    </p>    
</p>

CSS 코드클립보드에 콘텐츠 복사

.tooltip-wrapper {    
    position: absolute;    
    z-index: 9999;    
    padding: 5px;    
    background: white;    
    border: 1px solid #7d7d7d;    
    border-radius: 5px;    
}    
.tooltip-wrapper .arrow,    
.tooltip-wrapper .arrow:after {    
    position: absolute;    
    display: block;    
    width: 0;    
    height: 0;    
    border-color: transparent;    
    border-style: solid;    
}    
.tooltip-wrapper .arrow {    
    border-width: 11px;    
}    
.tooltip-wrapper .arrow:after {    
    content: "";    
    border-width: 10px;    
}    
.tooltip-wrapper.bottombottom .arrow {    
    top: -11px;    
    left: 50%;    
    margin-left: -11px;    
    border-top-width: 0;    
    border-bottom-color: #7d7d7d;    
}    
.tooltip-wrapper.bottombottom .arrow:after {    
    top: 1px;    
    margin-left: -10px;    
    border-top-width: 0;    
    border-bottom-color: white;    
}

위의 CSS 의사 요소를 사용하여 삼각형이 있는 프롬프트 상자를 만드는 방법은 편집기에서 공유하는 모든 콘텐츠입니다. 참고가 되기를 바라며, PHP 중국어 홈페이지를 지원해 주시길 바랍니다.

CSS 의사 요소를 사용하여 삼각형이 있는 프롬프트 상자를 만드는 방법에 대한 더 많은 구현 기술을 보려면 PHP 중국어 웹사이트에서 관련 기사를 확인하세요!