在創建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; 
}