我試圖復制像素一樣完美,因為我可以得到并且我很難嘗試在右邊做陰影.這可能與CSS？

CSS：

*{margin:0px;padding:0px;}

html {

width:100%;

height:100%;

text-align: center;

}

.bold {

font-weight:700;

}

#ribbon {

padding: .34em 1em;

margin: 0;

margin-top: 5%;

position:relative;

color: #000;

text-align: center;

letter-spacing:0.1em;

padding-top:12px;

padding-bottom:12px;

display: inline-block;

background: #ffd82b;

z-index:100;

Box-shadow: 0 7px 0px -2px #ebeced;

}

#ribbon:after {

content: "";

width:3.2em;

bottom:-.5em;

position:absolute;

display:block;

border: .9em solid #ffd82b;

Box-shadow: 0 7px 0px -2px #ebeced;

z-index:-2;

}

#ribbon:after {

right: -4.3em;

border-left-width: .75em;

border-right-color:transparent;

}

#content:after {

content:"";

bottom:-.5em;

position:absolute;

display:block;

border-style:solid;

border-color: #fc9f42 transparent transparent transparent;

z-index:-1;

}

#content:before {

content:"";

top:-.5em;

transform: rotate(90deg);

position:absolute;

display:block;

border-style:solid;

border-color: #fc9f42 transparent transparent transparent;

z-index:-1;

}

#content:before {

left: 0;

border-width: .5em 0 0 .5em;

}

#content:after {

right: 0;

border-width: .5em .5em 0 0;

}

HTML：

Special Offer: Recieve bonus rewards points for signing up

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html右侧隐藏功能区,html – CSS功能区上的三角形阴影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。