2

CSSでチェックサインのある右上の三角形を作成するより良い方法を見つけようとしています:

CSSの結果

これまでのところ、3 つの CSS 要素を使用して三角形を作成しています。

.arrow_down {
    width: 0; 
    height: 0; 
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-top: 200px solid #f00;
}

.arrow_left {
    margin-top: -200px;
    margin-left: 200px;
    width: 0; 
    height: 0; 
    border-top: 200px solid transparent;
    border-bottom: 200px solid transparent; 
    border-right:200px solid blue; 
}

.arrow_text { 
    font-size: 180px; 
    color: white; 
    margin-top: -200px; 
    margin-left: 0px; 
}

そして、私はそれに応じて三角形を次のように埋め込みました:

<div id="triangle"><div class="arrow_down"></div><div class="arrow_left"><div class=arrow_text>✔&lt;/div></div></div>

色を柔軟に変更できるようにする必要があるため、画像に切り替えることはできません。このような三角形をチェック記号で作成して埋め込むより良い (= より簡単な) 方法はありますか?

4

1 に答える 1

3

ちょうど別の 1 つの div バリエーション ( fiddle を参照):

.arrow {
    width: 400px;    
    height: 400px;
    letter-spacing: 20px;
    font: bold 200px/1 sans-serif;
    text-align: right;
    color: #fff;
    position: relative;
}

.arrow::before {
    content: '';
    border: 200px solid;
    border-color: #f00 #00f rgba(0,0,255,0) rgba(255,0,0,0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
于 2013-07-19T08:45:39.783 に答える