CSS的一个DIV的边坡curverd角

前端之家收集整理的这篇文章主要介绍了CSS的一个DIV的边坡curverd角前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何实现这< div>从CSS:

我的尝试:

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 80px solid white;
    border-right: 80px solid red;
    width: 0;
}

我不能修改斜率段和填充白色里面。

解决方法

我的尝试,如张贴在评论( http://jsfiddle.net/8Zm96/):
div{
    width: 300px;
    height: 280px;
    background: #fff;
    border: solid 1px red;
    border-width: 0 1px 1px 1px;
    border-radius: 4px;
    margin-top: 40px;
    position: relative;
}

div:before{
    content: '';
    position: absolute;
    top: -20px;
    right: -1px;
    border: solid 1px red;
    border-width: 1px 1px 0 0;
    border-radius: 25px 4px 0 0;
    height: 24px;
    width: 250px;
    background: #fff;
}

div:after{
    content: '';    
    position: absolute;
    top: -20px;
    left: 2px;
    border: solid 1px red;
    border-width: 0 0 1px 0;
    border-radius: 0 0 20px 0;
    height: 20px;
    width: 55px;
    background: #fff;
}

放大靠近,左角不适合,并且两个半曲线实际上彼此弯曲,但是在正常变焦时不可见。这对于可以显示放大的内容的电话和高分辨率屏幕可能是一个问题,或者在正常缩放时更准确。

原文链接:https://www.f2er.com/css/221511.html

猜你在找的CSS相关文章