CSS功能区上的三角形阴影 [英] Triangle shadow on CSS ribbon

问题描述

我试图复制，因为像素完美，因为我可以获得而且我很难在右边做阴影。这可能与CSS？

CSS：

  * {margin ：0px; padding：0px;} 
 
 html {
 width：100％; 
身高：100％; 
 text-align：center; 
} 
 
 .bold {
 font-weight：700; 
} 
 
 #ribbon {
 padding：.34em 1em; 
保证金：0; 
 margin-top：5％; 
职位：亲属; 
颜色：＃000; 
 text-align：center; 
 letter-spacing：0.1em; 
 padding-top：12px; 
 padding-bottom：12px; 
 display：inline-block; 
背景：＃ffd82b; 
 z-index：100; 
 box-shadow：0 7px 0px -2px #ebeced; 
} 
 
 #ribbon：after {
 content：; 
 width：3.2em; 
底部： - 。5em; 
位置：绝对; 
 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：在{
 content：; 
底部： - 。5em; 
位置：绝对; 
 display：block; 
 border-style：solid; 
 border-color：＃fc9f42透明透明透明; 
 z-index：-1; 
} 
 #content：之前{
 content：; 
 top： - 。5em; 
 transform：rotate（90deg）; 
位置：绝对; 
 display：block; 
 border-style：solid; 
 border-color：＃fc9f42透明透明透明; 
 z-index：-1; 
} 
 
 #content：之前{
 left：0; 
 border-width：.5em 0 0 .5em; 
} 
 
 #content：在{
 right：0; 
 border-width：.5em .5em 0 0; 
} 
  

HTML：

 < div id =ribbon> 
< span id =content>< span class =bold>特别优惠：< / span>收到注册奖励奖励积分< / span> 
< / div> 
  

或者这里是一个jsfiddle：
http://jsfiddle.net/k0a6jhv6/

解决方案

您可以制作此功能区，而不使用框阴影，仅限边框，z-index和伪元素：

DEMO

输出：

  .ribbon {font-size：20px;位置：相对;显示：内联块;保证金：2em 1em; text-align：center;}。text {display：inline-block;填充：0.5em 1em;最小宽度：20em;行高：1.2em;背景：＃FFD72A; position：relative;}。ribbon：after，.ribbon：before，.text：before，.text：after，.bold：before {content：'';位置：绝对的; border-style：solid;}。ribbon：before {top：0.3em;左：0.2em;宽度：100％;高度：100％;边界：无;背景：#EBECED; z-index：-2;}。text：before {bottom：100％;左：0; border-width：.5em .7em 0 0; border-color：transparent＃FC9544 transparent transparent;}。text：after {top：100％;右：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;边框颜色：＃FECC30透明＃FECC30＃FECC30; z-index：-1;}。bold：before {border-color：#EBECED transparent #EBECED #EBECED;顶部：0.7em;右：-2.3em;}  

< p class = 带 > < span class =text>< strong class =bold>特别优惠：< / strong>收到奖励奖励积分< / span>< / p>

I am trying to replicate as pixel perfect as I can get and im having trouble trying to do the shadow on the right. Is this possible with 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>

Or here's a jsfiddle: http://jsfiddle.net/k0a6jhv6/

解决方案

You can make this ribbon without using box-shadows, only with borders, z-index and pseudo elements :

DEMO

output :

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

这篇关于CSS功能区上的三角形阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！