CSS에서 삼각형 구현의 간단한 예에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS에서 삼각형 구현의 간단한 예에 대한 자세한 설명

高洛峰

풀어 주다： 2017-03-07 14:49:28

원래의

1626명이 탐색했습니다.

많은 페이지 제작에서 삼각형이 돌출되도록 디자인됩니다. 다양한 브라우저와 호환되는 디자인 방법은 다음과 같습니다.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .corner-top{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:solid dashed dashed dashed;     
            border-color:#e66161 transparent transparent transparent;   
        }   
        .corner-bottom{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:dashed dashed solid dashed;     
            border-color:transparent transparent #94e24f transparent;   
        }   
        .corner-left{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:dashed dashed dashed solid;     
            border-color:transparent transparent transparent #85bfda;   
        }   
        .corner-right{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:dashed solid dashed dashed;     
            border-color:transparent #f3bb5b transparent transparent;   
        }   
    </style>
</head>
<body>
    <p class="corner-top"></p>
    </br>
    <p class="corner-bottom"> </p>
    </br>
    <p class="corner-left"> </p>
    </br>
    <p class="corner-right"> </p>
</body>
</html>

로그인 후 복사

주요 참고 사항:

1. Font-size:0;은 IE와의 호환성을 위한 것입니다. 그렇지 않으면 IE가 사다리꼴로 나타나거나 line-height:0도 작동합니다.

2. 확장 가능한 행을 개선하려면 테두리 색상을 투명하게 설정하세요. 그러나 IE에서는 투명이 회색으로 표시됩니다.

3. 프로젝트에서는 일반적으로 절대값이 선택됩니다. 위치 지정은 삼각형을 해당 위치에 배치하지만 때로는 역삼각형을 사용할 필요가 없는 경우도 있습니다. 그 결과 컨테이너에 높이가 여러 개 있게 됩니다. (삼각형 디자인의 원리를 알 수 있음)

순수 CSS로 삼각형을 구현한 위의 간단한 예는 모두 편집자가 공유하는 내용이기를 바랍니다. 당신에게 참고 자료를 제공하고 PHP 중국어 웹 사이트를 지원하기를 바랍니다.

CSS를 사용하여 삼각형을 구현하는 간단한 예에 대한 자세한 예를 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!