在创建CSS和HTML背景只有

Question

我想在HTML创建此背景& CSS - 注：我不是要包含文本/标志“Joinnow”：

我已经在JSFiddle上得到了如此远的展示：http://jsfiddle.net/9uppsLqa/26/

底部部分很好，但我正在努力的顶部。出于某种原因，我得到：

• 角度的边界，我需要直
• 我不能增加顶部的高度。
• 我不能用border-radis曲线顶部的角落
• 颜色与主体顶部不匹配。

当前下面的代码：

<div class="object"></div> 


.object { 
    border-bottom-right-radius: .1875em; 
    border-bottom-left-radius: .1875em; 
    z-index: 99; 
    position: relative; 
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15); 
    background-repeat: repeat-x; 
    background-position: 0 0; 
    background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%); 
    background-color: #e1e1e1; 
    margin-top: 3em; 
    margin-left: .75em; 
    margin-right: .75em; 
    padding-left: 0; 
    padding-bottom: 0; 
    padding-right: 0; 
    padding-top: 0; 
    width: 340px; 
    height: 160px; 
} 
.object:after, .object:before { 
    border: 13px solid transparent; 
    position: absolute; 
    content: ''; 
    left: 58%; 
    bottom:100%; 
    width: 140px; 
    height: 800px; 
    border-top-left-radius: .1875em; 
    border-top-right-radius: .1875em; 
} 

.object:after { 
    border-bottom-color: #fafafa; 
    border-width: 14px; 
    margin-left: -24px; 
    height: 60px; 
} 

.object:before { 
    border-bottom-color: #999; 
    border-width: 15px; 
    margin-left: -25px; 
    height: 60px; 
} 

三江源

Answer 1

这里是仍然使用一个替代：之后，但代替设置伪元素，背景颜色，宽度和各元件的高度的边界被设置为实现类似的效果：前和。

CSS：

.object { 
    border-bottom-right-radius: .1875em; 
    border-bottom-left-radius: .1875em; 
    z-index: 99; 
    position: relative; 
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15); 
    background-repeat: repeat-x; 
    background-position: 0 0; 
    background-image: linear-gradient(to bottom,rgba(255,255,255,0.9) 0,rgba(255,255,255,0.2) 100%); 
    background-color: #e1e1e1; 
    margin-top: 3em; 
    margin-left: .75em; 
    margin-right: .75em; 
    padding-left: 0; 
    padding-bottom: 0; 
    padding-right: 0; 
    padding-top: 0; 
    width: 340px; 
    height: 160px; 
} 

.object:after, .object:before { 
    position: absolute; 
    content: ''; 
    left: 66%; 
    bottom: 100%; 
    border-top-left-radius: .1875em; 
    border-top-right-radius: .1875em; 
} 

.object:after { 
    background-color: #fafafa; 
    border-width: 14px; 
    margin-left: -24px; 
    width: 140px; 
    height: 15px; 
} 

.object:before { 
    background-color: #999; 
    border-width: 15px; 
    margin-left: -25px; 
    width: 142px; 
    height: 16px; 
} 

您可以通过每个伪元素上增加高度值增加顶部的高度。你只需要记住，就像现在一样，以前：在涉及到身高时，总是需要比以前多1px。

此外，线性渐变的alpha值已更改，以尝试使颜色渐变更平滑，甚至在顶部和底部之间。

例：http://jsfiddle.net/58rmrqd9/

Answer 2

这里：http://jsfiddle.net/9uppsLqa/28/

基本上你不应该需要之前和之后产生这种效果，实在没有必要在我看来。

.object { 
    border-bottom-right-radius: .1875em; 
    border-bottom-left-radius: .1875em; 
    z-index: 99; 
    position: relative; 
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15); 
    background-repeat: repeat-x; 
    background-position: 0 0; 
    background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%); 
    background-color: #e1e1e1; 
    margin-top: 3em; 
    margin-left: .75em; 
    margin-right: .75em; 
    padding-left: 0; 
    padding-bottom: 0; 
    padding-right: 0; 
    padding-top: 0; 
    width: 340px; 
    height: 160px; 
} 
.object:after { 
    border: 13px solid transparent; 
    position: absolute; 
    content: ' '; 
    right: -1px; 
    bottom:100%; 
    width: 140px; 
    height: 800px; 
    border-top-left-radius: .1875em; 
    border-top-right-radius: .1875em; 
    border-color: #c4c4c4; 
    border-width: 1px; 
    border-bottom-style: none; 
    background-color: #fbfbfb; 
    height: 60px; 
    z-index: 1; 
}