CSSでのトライアングル実装の簡単な例を詳しく解説-CSSチュートリアル-php.cn

CSSでのトライアングル実装の簡単な例を詳しく解説

高洛峰

リリース： 2017-03-07 14:49:28

オリジナル

1665 人が閲覧しました

多くのページ制作では、三角形が強調表示されるようにデザインされます。

<!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. 0; 目的は IE との互換性です。そうでない場合、IE は台形に表示されます。または line-height:0; も機能します

2 拡張可能な行を改善するために、境界線の色を透明に設定します。 IE では灰色になります。互換性の方法は、対応する境界線スタイルを設定することです

3. プロジェクトでは、通常、三角形を対応する位置に配置するために絶対配置を使用することを選択します。逆三角形。その結果、コンテナ内に複数の高さが存在します。メソッドは、コンテナの高さを設定してから、overflow: hidden; (三角形の設計原理を知ることができます)

純粋に三角形を実装する上記の単純な例です。 CSS はすべてエディターが共有した内容ですので、皆さんの参考になれば幸いです。また、皆さんも PHP 中国語をサポートしていただければ幸いです。

CSS を使用して三角形を実装する簡単な例の詳細については、PHP 中国語 Web サイトに注目してください。