CSS3で実装する3D効果のあるリボン

Code reuseより、早速参考にさせてもらったCSS3で実装する3D効果のあるリボンを紹介します。

下記のソースコードで図のようなリボンを作ることができます。HTMLやCSSのコードは以下です。

HTML

<div class="arthro">
Before ribbon
<div class="ribbon"><span>Title in the ribbon</span></div>
<div class="triangle"></div>
 After ribbon<br>
</div>

CSS

* {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.arthro {
    display:block;
    margin:3em;
    border:1px solid #999;
    background-color:#eee;
}
.ribbon {
    background-color:#099;
    -moz-border-radius:0 1em 1em 0;
    border-radius:0 1em 1em 0;
    border:1px solid #033;
    padding:.3em 1em .3em 2em;
    margin:0 2em 0 -1em;
    -webkit-box-shadow:2px 1px 2px #066;
    box-shadow:2px 1px 2px #066;
   
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#0ff),
        color-stop(20%,#0cc),
        color-stop(80%,#099), to(#066));
    background: -moz-linear-gradient(top,#0ff,
        #0cc 20%,
        #099 80%,#066 100%);
    background: linear-gradient(#EEFF99, #66EE33);
}
.ribbon span {
    font-weight:bold;
    font-size:2em;
    color:#eee;
    text-shadow:1px 1px 2px #000;
}
.triangle {
    border-style:solid;
    border-color:#066 #066 transparent transparent;
    border-width:.25em .5em .25em .5em;
    width:1em;
    height:.5em;
    margin-left:-1em;
}

上記のbox-sizingプロパティは忘れずに!また、下記図のようなリボンを載っていました。

HTML

<div class="corner">
<a href="#">Best Ribbon around</a>
</div>

css

.corner {
    background-color: #a00;
    overflow: hidden;
    position: absolute;
    left: -3em;
    top: 2.5em;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -moz-box-shadow: 0 0 1em #888;
    -webkit-box-shadow: 0 0 1em #888;
    box-shadow: 0 0 1em #888;
}
.corner a {
     border: 1px solid #faa;
     color: #fff;
     display: block;
     font-size:.8em;
     font-weight:bold;
     padding: 0.5em 4em;
     text-align: center;
     text-decoration: none;
     text-shadow: 1px 1px 1px #000;
}