JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1"></div>

<div id="d2">
    <span class="triangle-button">
        右上角是圆角还是直角？
    </span>
</div>



<div style="margin-top:200px">
    <button onclick="test('150px')">离开红色块</button>
    <button onclick="test('10px')">在红色块上</button>
    <br/><br/>
    在chrome(版本28.0.1500.95，其它版本未测)或safari里蓝色的部分会显示出一个三角形，而不是预先想要的圆角，这个在firefox里是好的，算浏览器bug么？
</div>

CSS

#d1 {
    width:100px;
    height:100px;
    background:red;
   
    position: absolute;
    top:0;
    left:0;
}

#d2 {
    position: absolute;
    width:220px;
    top:10px;    /*将10改成150试试*/
}

.triangle-button {
    border-radius: 20px;
    background:green;
    position: absolute;
    text-align: center;
    top: 0;
    right: 0;
    color: #fff;
    overflow: hidden;
    line-height:32px;
    width: 220px;
}
.triangle-button:before {
    content: '';
    display: inline-block;
    border-right: 32px solid;
    border-bottom: 32px solid transparent;
    position: absolute;
    top: 0;
    right: 0;
    border-right-color: blue;
}

JavaScript

window.test = function(top)
{
    document.getElementById('d2').style.top = top;
}