CSS에서 다양한 방향 화살표를 사용해 보세요.-CSS 튜토리얼-php.cn

CSS에서 다양한 방향 화살표를 사용해 보세요.

烟雨青岚

풀어 주다： 2020-07-07 13:13:44

앞으로

3239명이 탐색했습니다.

CSS에서 다양한 방향 화살표를 사용해 보세요.

페이지를 개발할 때 화살표를 사용해야 하는 목록이 많이 있습니다. 순수 CSS도 구현할 수 있으며, 이에 비해 호환성 문제는 없습니다. 사진이 더 좋습니다.

원리: 높이와 너비가 같은 정사각형의 경우 필요한 변을 선택하여 가로채기와 높이가 모두 0이고 다른 변이 투명하면 삼각형이 나타납니다

사다리꼴이 됩니다. 코드:
CSS에서 다양한 방향 화살표를 사용해 보세요.

html:
<div class="arrow"></div>
css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}

로그인 후 복사

높이와 너비를 0으로 설정하고 반대쪽은 투명한 색상으로 삼각형이 나옵니다.
CSS에서 다양한 방향 화살표를 사용해 보세요.

html:
<div class="arrow"></div>
css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}

로그인 후 복사

개발에서는 의사 클래스를 사용하여 코드를 변경하지 않고 구현 위치를 지정할 수 있습니다. 간단하고 우아한 DOM 구조. 콘텐츠는 삼각형의 위치를 제공합니다. 이 속성은 누락될 수 없습니다.
CSS에서 다양한 방향 화살표를 사용해 보세요.

html:
<div class="arrow">文字文字</div>
css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:&#39;&#39;;
}

로그인 후 복사

플랫한 디자인을 추구하면서 더욱 인기를 끄는 또 하나의 삼각선 화살표가 있습니다.
두 개의 의사 클래스를 설정합니다. 첫 번째 의사 클래스는 다른 의사 클래스를 포함합니다. 몇 줄만 남겨두세요.
CSS에서 다양한 방향 화살표를 사용해 보세요.

html:
<div class="arrow">文字文字</div>
CSS:
div {
       position: relative; 
    }
    .arrow:after,.arrow:before {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: orange;
        position: absolute;
        content: "";
    }
   .arrow:before{
    top: 0;
   left: 70px;//根据实际情况调整
   border-left-color: white;
   }

로그인 후 복사

좋아하실 것입니다.

읽어 주셔서 감사합니다. 많은 혜택을 누리시기 바랍니다. .

이 기사는 https://blog.csdn.net/qq_34250472/article/details/55513862