完美地对齐一个有圆形边框正方形的折叠角的数字

Question

http://jsfiddle.net/zander_pope/vb0s4jer/我想以最少的DIVS和CSS（仅HTML和CSS）来实现这样的目标。所有的角甚至都应折叠。

<div class="square">
<div class="inner">
    <p>4</p>
</div>
</div>
.square{
    width:100px;
    height:100px;
    background-color:blue;
    border-radius:4px;
}
.inner{
width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 0;
border-color: #ff0000 transparent transparent transparent;
}

Answer 1

.square class中的 overflow:hidden;：

.square{   
    overflow:hidden;
    width:100px;
    height:100px;
    background-color:blue;
    border-radius:4px;
}

Answer 2

html

<div class="square">
    <div class="square fold"/>
</div>

CSS

.square {
   width:100px;
   height:100px;
   background-color:blue;
   border-radius:4px;
}
.square .fold {
    background-color:red;
    -webkit-clip-path: polygon(0 0, 0 29%, 29% 0);
    clip-path: polygon(0 0, 0 29%, 29% 0);
}

https://jsfiddle.net/vb0s4jer/6/