html4个角都有阴影,html – 如何创建这个有角度的阴影(没有图像)？

不是真的要解释得太多,因为你已经知道它是如何工作的.对于那些没有 – 基本上,我在父母上添加了线性渐变背景.然后我在每一侧覆盖CSS三角形(通过：在/之后添加),以实现所需的外观.

它适用于所有主流浏览器.虽然它确实在Chrome中看起来更好,因为FF会在三角形上产生锯齿状边缘.

HTML

CSS

#two {

width: 940px;

height: 350px;

padding: 0;

margin-left: 10px;

position: relative;

background: rgb(255,255,255);

background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(255,255,255,1) 98%);

background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 98%);

background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 98%);

}

#two > div {

background-color: purple;

width: 920px;

height: 100%;

margin: 0px auto;

}

#two:before, #two:after {

content: "";

width: 10px;

height: 0px;

border-top: 175px solid transparent;

border-bottom: 175px solid transparent;

position: absolute;

top: 0;

}

#two:before {

left: 0px;

border-left: 10px solid white;

}

#two:after {

right: 0px;

border-right: 10px solid white;

}

让我知道你的想法 – 据我所知,他们看起来一样.可以稍微调整渐变以使它们相同.