작은 화살표 또는 삼각형 로고를 구현하는 순수 CSS

프론트엔드 엔지니어로서 작업 중에 CSS를 사용하여 작은 화살표, 삼각형 및 기타 기호를 만드는 것은 불가피합니다. 이제 순수한 CSS를 사용하여 작은 화살표, 삼각형 및 기타 기호를 만드는 방법을 알려 드리겠습니다.

작은 화살표 구현:

.arrow{
    width: 20px;
    height: 20px;
    margin-top: 50px;
    margin-left: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);/*旋转角度*/
}
<div class="arrow"></div>

삼각형 구현:

.triangle{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform:rotate(45deg);
}
<div class="triangle"></div>

(무료 동영상 튜토리얼: css 동영상 튜토리얼)

여러 요소를 한 줄에 표시하는 방법은 무엇인가요?

(1) 디스플레이: inline은 요소를 인라인 요소로 변환하지만 너비와 높이 속성은 영향을 미치지 않습니다.

(2) 디스플레이: inline-block을 사용하면 요소를 한 줄에 표시할 수 있지만 공백과 높이의 영향을 받습니다. 줄 바꿈이 기본으로 적용됩니다.

해결책:

1. 레이블이 모두 한 줄에 있도록 공백과 줄 바꿈의 영향을 제거합니다. (이 방법은 읽을 수 없으므로 권장되지 않습니다.) . 디스플레이 추가: inline-block 속성 요소의 상위 요소에 글꼴 크기:0

display:inline-block在ie6 7下不兼容的解决办法？
dispaly:inline;//css hack ie浏览器可以识别
zoom:1;//触发css hack的layout

속성을 추가합니다

3. 부동 부동:왼쪽/오른쪽을 사용하지만 부동 소수점을 지워야 합니다

관련 권장 사항:

CSS 튜토리얼

위 내용은 작은 화살표 또는 삼각형 로고를 구현하는 순수 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!