如何修改CSS border-radius去除边角曲线，实现直角直线效果（附jsfiddle）

问题原因 #

你当前使用的border-radius: 100% / 0 0 0 100px是CSS椭圆圆角语法，/前的数值定义圆角水平半径，后的数值定义圆角垂直半径，这种写法生成的边角必然是弧形，无法得到直边效果。

方案1：使用clip-path实现（推荐） #

直接通过裁剪路径定义上层白色盒子的可见区域，裁剪后露出下层橙色的直角三角形，逻辑简单易维护：

.box{
    position:relative;
    background:#fff;
    display:block;
    width:100px; 
    height:100px;
    /* 替换原有border-radius属性 */
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.box::before{
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    background:#f9955e;
    content:"";
}

方案2：边框法实现（兼容低版本浏览器） #

如果需要兼容不支持clip-path的旧版浏览器，可以用CSS边框特性实现三角形，无需依赖圆角属性：

.box{
    position:relative;
    background:#f9955e;
    display:block;
    width:100px; 
    height:100px;
}

.box::before{
    position:absolute;
    right: 0;
    top: 0;
    border: 100px solid transparent;
    border-right-color: #fff;
    border-top-color: #fff;
    width: 0;
    height: 0;
    content:"";
}

内容的提问来源于stack exchange，提问作者Aren Trot