CSS3의 의사 요소를 사용하여 버블 상자를 구현하는 코드(전, 후)

이 기사는 CSS3에서 의사 요소를 사용하여 버블 상자를 구현하기 위한 코드(이전, 이후)를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

버블 상자의 원리는 실제로 일반 테두리 + 삼각형입니다. 삼각형의 CSS 구현도 테두리 속성을 사용합니다
1. 삼각형은 단단합니다

html 코드:

<div class="wrap"></div>

css 코드:

.wrap{
            position: relative;            
            width: 600px;            
            height: 400px;            
            border: 10px solid #3377aa;            
            border-radius: 20px;        
    }
.wrap::before{
            position: absolute;            
            content: '';            
            width: 0;            
            height: 0;            
            border-width: 40px 20px;  
            /*上下、左右的border值*/
            border-style: solid;            
            border-color: #3377aa transparent transparent;
            /*只设置上面border的颜色，左右和下面都设置为透明，会出现一个倒三角*/
            bottom: -80px; 
            /*以下给三角形定位，使其处于底部居中处*/
            left: 50%;            
            margin-left: -20px; 
        }

Rendering :

2. 삼각형이 비어 있어야 하는 경우 렌더링은 다음과 같습니다.

css 코드는 다음과 같습니다. 삼각형의 테두리 색상입니다. 위의 테두리 색상은 흰색으로 설정되어 있어 잘 보이도록 다음과 같이 본문 색상을 #ccc로 설정했습니다.

추천 관련 글:

Pseudo 추가 CSS3 클래스란 무엇이며 그 기능은 무엇입니까?

CSS 선택기에는 어떤 유형이 있나요? 일반적으로 사용되는 CSS 선택기에 대한 간략한 소개

위 내용은 CSS3의 의사 요소를 사용하여 버블 상자를 구현하는 코드(전, 후)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!