仅在CSS和HTML中创建背景

我正在尝试用HTML和CSS创建此背景-注意：我现在没有尝试包含文本/徽标：

我在JSFIDLE上看到了这一点：

底部很好，但顶部我还在挣扎。出于某种原因，我得到：

有角度的边框，我需要笔直的 我不能增加顶部的高度。 我不能用边界萝卜弯曲顶部的角 顶部的颜色与车身不匹配。 当前代码如下：

<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;
}

谢谢

这里：

基本上，你不应该在创建这个效果之前和之后都需要，在我看来，两者都没有必要

.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;
}

在这里：

基本上，你不应该在创建这个效果之前和之后都需要，在我看来，两者都没有必要

.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;
}

---

这里有一个替代方案，它仍然使用：before和：after，但不是设置伪元素的边界，而是设置每个元素的背景色、宽度和高度以实现类似的效果

CSS:

可以通过增加每个伪图元上的“高度”值来增加顶部零件的高度。你只需要记住，现在的情况是：before在高度上总是需要比：after多1倍

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

---

示例：

这里有一个替代方案，它仍然使用：before和：after，但不是设置伪元素的边界，而是设置每个元素的背景色、宽度和高度以实现类似的效果

CSS:

可以通过增加每个伪图元上的“高度”值来增加顶部零件的高度。你只需要记住，现在的情况是：before在高度上总是需要比：after多1倍

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

---

示例：

我确信您可以根据需要设置边界半径、高度和宽度，我只是正确设置了定位并删除了过多的定义。我还将：after设置为从右侧开始，而不是从左侧开始，因为更改宽度或其他任何操作都会使其不对齐。还要注意，我使用显式十六进制颜色值作为边框，并使用边框而不是框阴影，因为它的宽度仅为1px。因为它是嵌入的，所以我并不认为使用框阴影有什么意义，因为这里定义了100%不透明的背景色。考虑到顶部没有任何坡度，我很确定您可以根据需要设置边界半径、高度和宽度，我只是正确设置了定位，并删除了过多的定义。我还将：after设置为从右侧开始，而不是从左侧开始，因为更改宽度或其他任何操作都会使其不对齐。还要注意，我使用显式十六进制颜色值作为边框，并使用边框而不是框阴影，因为它的宽度仅为1px。因为它是嵌入的，所以我并不认为使用框阴影有什么意义，因为这里定义了100%不透明的背景色。考虑到顶部没有任何坡度。