我试图在右侧获得与右侧相同的 3d 阴影效果。
请看这个 fiddle :
<div class="ribbon">WOW</div>
[CSS]
.ribbon {
position:relative;
width: 100%;
height: 30px;
background-color: #5ad2f0;
text-align: left;
border-radius: 5px 0px 0px 5px;
margin:5px 0;
color:white;
font-weight:bold;
font-size:12px;
padding-left: 20px;
}
.ribbon:after {
content: "";
position: absolute;
bottom: -10px;
right:2px;
display: inline-block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 16px solid #3aacc9;
z-index:-1
}
.ribbon:before {
content: "";
position: absolute;
bottom: -14px;
left:1px;
display: inline-block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 16px solid #3aacc9;
z-index:-1
}
右侧看起来并不完美。
提前致谢:)
最佳答案
.ribbon {
border: 1px solid #000000;
position:relative;
width: 70%;
height: 30px;
background-color: #5ad2f0;
text-align: left;
border-radius: 5px 5px 5px 5px;
margin:5px 0;
color:white;
font-weight:bold;
font-size:12px;
padding-left: 20px;
}
.ribbon:after {
content: "";
position: absolute;
bottom: -14px;
right:1px;
display: inline-block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 16px solid #3aacc9;
z-index:-1
}
.ribbon:before {
content: "";
position: absolute;
bottom: -14px;
left:0px;
display: inline-block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 16px solid #3aacc9;
z-index:-1
}
<div class="ribbon">WOW</div>
关于html - 试图在右侧获得与左侧相同的效果 [css3 ribbons],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26071168/