CSS 功能区上的三角形阴影答案

【问题标题】：Triangle shadow on CSS ribbonCSS 功能区上的三角形阴影
【发布时间】：2015-03-10 15:14:30
【问题描述】：

我正在尝试将复制为尽可能完美的像素，但我在尝试制作右侧的阴影时遇到了麻烦。用 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： http://jsfiddle.net/k0a6jhv6/

【问题讨论】：

您可以使用drop-shadow 来代替box-shadow。 - 查看功能区的右端：jsfiddle.net/peteng/k0a6jhv6/2
只需使用 rgb 颜色和不透明度来满足您的需求：jsfiddle.net/peteng/k0a6jhv6/5
@Pete 绝妙的主意。到目前为止，我并没有把这些过滤器弄得太乱。 jsfiddle.net/k0a6jhv6/6

标签： html css css-shapes

【解决方案1】：

你可以在不使用盒子阴影的情况下制作这个功能区，只使用边框、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>

【讨论】：

【解决方案2】：

如果你添加一个新元素来创建缺失的阴影呢？

#abc {
    display:inline-block;       
    border: .9em solid #ebeced;
    border-right-color:transparent;
    position:absolute;
    right:-73px;
    z-index:-3;
    bottom:-12px;
}

http://jsfiddle.net/k0a6jhv6/9/

另一种解决方案，在 #content 中使用 span:after

#content span:after {
    content:'';
    display:block;      
    border: .9em solid #ebeced;
    border-right-color:transparent;
    position:absolute;
    right:-73px;
    z-index:-3;
    bottom:-12px;
}

http://jsfiddle.net/k0a6jhv6/11/

【讨论】：