css - 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 做到这一点，但它有很多摆弄（=潜在的跨浏览器问题）。我设置了一个关于如何使用 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;
}

Answer 4

也许这段代码？jsFiddle，我不确定你是否想要，但它适用于所有浏览器..

HTML：

<div class="head">&nbsp;</div>
<div class="bdy"><div class="mask"></div>&nbsp;<br><br><br><br><br><br></div>

CSS：

.head{    
    border-top: 1px solid #ffccff;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-radius: 40px 7px 0 0 ;
    margin-left: 20%;
}
.bdy{
    border-radius: 3px 0 3px 3px;
    border-top: none;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-bottom: 1px solid #ffccff;
}
.mask{

    top:-1px;
    left:1px;
    width:20%;
    height: 1px;
    background-color:#ffccff;
}