css - 带复选标志的右上角三角形

Question

我正在尝试找到一种更好的方法来使用 CSS 创建一个带有复选标记的右上角三角形：

到目前为止，我用三个 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>

我无法切换到图像，因为我需要能够灵活地更改颜色。有没有更好（=更简单）的方法来创建和嵌入这样一个带有复选标志的三角形？

Answer 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;
}