透明を使用して三角形を作成します

今回は、透明を使用して三角形を作成する場合と、透明を使用して三角形を作成する場合の注意事項を説明します。以下は実際のケースです。

レンダリングは次のとおりです

サンプルコード

nbsp;html>


    <meta>
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 40px auto;
            width: 60px;
            background-color: #f0ac6b;
        }
        .t1{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            /*background-color: #f0ac6b;*/
            border-bottom: 40px solid red;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }
        .t2{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            /*background-color: #f0ac6b;*/
            border-bottom: 40px solid transparent;
            border-right: 40px solid red;
            /*border-left: 20px solid transparent;*/
        }
        .t3{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid red;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }
        .t4{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid transparent;
            border-left: 40px solid red;
        }
        .t5{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid red;
            border-right: 40px solid transparent;
        }
        .t6{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            border-left: 40px solid transparent;
            border-bottom: 40px solid red;
        }
        .t7{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-left: 40px solid red;
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
        }
        .t8{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-right: 40px solid red;
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
        }
    </style>


<p>
    </p><p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

さらに興味深い内容については、php中国語のWebサイトに注目してくださいその他。 関連記事！

推奨読書:

CSS3とのブラウザ互換性の問題

半透明要素の設定

CSS3でピンク色のログインインターフェースを作成する

以上が透明を使用して三角形を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。