HTML+CSS는 아름다운 삼각형 프롬프트 상자 스타일을 구현합니다.

웹사이트를 탐색할 때 웹사이트에 온갖 종류의 참신한 프롬프트 상자가 있다는 것을 아셨나요? 이렇게 아름다운 프롬프트 상자를 만드는 방법을 아시나요? 이 기사에서는 CSS로 구현된 아름다운 삼각형 프롬프트 상자를 공유합니다. 여기에는 관심 있는 친구들이 참조할 수 있습니다.

CSS를 사용하여 삼각형 프롬프트 상자 스타일을 구현하려면 표시 속성, 테두리 반경 필렛, 위치 위치 지정 등과 같은 CSS의 많은 속성을 사용해야 합니다. 잘 모르겠으면 이전에 소개한 이전 기사를 확인하거나 CSS 비디오 튜토리얼을 방문하세요.

인스턴스 설명: div 제공, border-radius, before, border-top 및 기타 속성 사용, 프롬프트 상자의 왼쪽 상단 모서리와 오른쪽 하단 모서리에 삼각형 추가, 삼각형 프롬프트 생성 구체적인 코드는 다음과 같습니다:

HTML 부분:

<div class="main">
   <p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>

CSS 부분:

*{
      margin: 0;
      padding: 0;
     }  
     .main{
      width: 120px;
      display: inline-block;
      font-size: 14px;
      color: #333;
      line-height: 28px;
      background: #F0981C;
      position: relative;
      padding: 10px;
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      : 5px;
     }
     /*左三角*/
     .main:before{
      content: ' ';
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 12px solid #F0981C;
      position: absolute;
      top: 15px;
      left: -12px;
     }
     /*右三角*/
     .main:after{
      content: ' ';
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 12px solid #F0981C;
      position: absolute;
      bottom: 15px;
      right: -12px;
     }

Rendering:

#🎜🎜 #

#🎜🎜 #CSS를 사용하여 삼각형 프롬프트 상자를 만드는 코드는 위에 공유되어 있습니다. 좋아하는 친구들은 이를 사용하거나 자신이 좋아하는 스타일로 수정하여 사용할 수 있습니다. 너!

【관련 튜토리얼 추천】

1.

HTML 동영상 튜토리얼

2 CSS3 동영상 튜토리얼#🎜🎜 #
3 부트스트랩 튜토리얼

위 내용은 HTML+CSS는 아름다운 삼각형 프롬프트 상자 스타일을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!