html – CSS功能区上的三角形阴影
发布时间:2020-12-14 16:43:47 所属栏目:资源 来源:网络整理
导读:我试图复制像素一样完美,因为我可以得到并且我很难尝试在右边做阴影.这可能与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
我试图复制像素一样完美,因为我可以得到并且我很难尝试在右边做阴影.这可能与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: <div id="ribbon"> <span id="content"><span class="bold">Special Offer:</span> Recieve bonus rewards points for signing up</span> </div> 或者这是一个jsfiddle: 解决方法
您可以在不使用框阴影的情况下制作此功能区,仅使用边框,z-index和伪元素:
DEMO 输出: .ribbon{ font-size:20px; position:relative; display:inline-block; margin: 2em 1em; text-align:center; } .text{ display:inline-block; padding:0.5em 1em; min-width:20em; line-height:1.2em; background: #FFD72A; position:relative; } .ribbon:after,.ribbon:before,.text:before,.text:after,.bold:before{ content:''; position:absolute; border-style:solid; } .ribbon:before{ top:0.3em; left:0.2em; width:100%; height:100%; border:none; background:#EBECED; z-index:-2; } .text:before{ bottom:100%; left:0; border-width: .5em .7em 0 0; border-color: transparent #FC9544 transparent transparent; } .text:after{ top:100%; right:0; border-width: .5em 2em 0 0; border-color: #FC9544 transparent transparent transparent; } .ribbon:after,.bold:before{ top:0.5em;right:-2em; border-width: 1.1em 1em 1.1em 3em; border-color: #FECC30 transparent #FECC30 #FECC30; z-index:-1; } .bold:before{ border-color: #EBECED transparent #EBECED #EBECED; top:0.7em; right:-2.3em; } <p class="ribbon"> <span class="text"><strong class="bold">Special Offer:</strong> Recieve bonus rewards points for signing up</span> </p> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |