css - 带复选符号的右上三 Angular 形

Question

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

到目前为止，我用三个 CSS 元素生成了三 Angular 形:

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

然后我像这样相应地嵌入三 Angular 形:

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

我无法切换到图像，因为我需要能够灵活地更改颜色。 是否有更好的(= 更简单的)方法来创建和嵌入带有复选符号的三 Angular 形？

Answer 1

只是另一个 div 变体 ( see 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;
}