用于DIV斜坡弯曲的CSS

Question

如何实现这个<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;
}

我无法修改斜坡区域并填充内部白色.

Answer 1

我的尝试,如评论中所述(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;
}

近距离放大,左角不合适,两条半曲线实际上相互弯曲,但在正常变焦时都没有看到.这可能是电话和高分辨率屏幕的问题,其可以显示放大的内容,或者更准确地显示正常的缩放.

Answer 2

这是我最好的尝试:http://jsfiddle.net/2y7TB/2/

这是我用过的:

我只在Chrome上测试过,如果你喜欢它并想要一个跨浏览器的解决方案请问:)

LE:似乎也能在最新版本的Firefox和Opera上正确显示.

.tab:before {
    content: '';
    position: absolute;
    top: -23px;
    right: -1px;
    border-right:1px solid orange;
    border-left:1px solid orange;
    border-top:1px solid orange;
    background:white;
    width: 247px;
    height:24px;
    border-top-right-radius:5px;
    border-top-left-radius:25px;
}

.tab:after {
    content: '';
    position: absolute;
    top: -9px;
    left:1px;
    border-right:1px solid orange;
    border-bottom:1px solid orange;
    border-top:none;
    background:white;
    width: 53px;
    height:9px;
    border-bottom-right-radius:180px;
    box-shadow:3px 3px 0px 3px white;
}

Answer 3

你可以用css做到这一点,但它有很多摆弄(=潜在的crossbrowser问题).我设置了一个如何用CSS做的小提琴.然而,人们可以看到边界内的一些干扰(特别是在缩放时).它只是一个草图,当然可以优化.

更好的和交叉浏览器可靠的解决方案是在下面标记的位置使用背景图像.如果您愿意,可以使用伪元素.

基本上我用两个旋转和偏斜的伪元素构建斜率.该解决方案优于只使用边界半径的那些(我认为这是非常不理想的,因为浏览器渲染圆角完全不同),但需要兼容的浏览器因transform.

#head:before,#head:after {
    content:"";display:block;
    height:40px; 
    width:70px;
    border-left:2px solid orange;
    border-top:2px solid orange;
    transform:skewX(-45deg);
    border-top-left-radius:10px;
    position:relative;
    top:-2px;
    left:-40px;
}
#head:after {
    transform:rotate(180deg) skewX(-45deg);
    left:-180px;bottom:32px;top:auto;
    width:128px;
}