Dekorasi HTML & CSS

Contoh dekorasi HTML & CSS

HTML & CSS Myscript2010 Cibeber Cimahi

<style type="text/css">
#box {
    position:relative;
    background:#444;
    width:300px;
    height:200px;
    margin:20px 25px;
}
#ribbon {
    position:absolute;
    top:15px;
    left:-20px;
    width:260px;
    height:55px;
    background:#ff2702;
    color: #F0FFFF;
    padding:30px 40px;
    font-size:40px;
    font-weight:bold;
    border-radius:9px 5px 0 0;
    box-shadow:0 0 9px #333;
    text-shadow:0 0 8px #000;
}
#ribbon:before {
    content:'';
    position:absolute;
    bottom:-20px;
    left:0;
    border-top:solid 10px #ff2702;
    border-right:solid 10px #ff2702;
    border-bottom:solid 10px transparent;
    border-left:solid 10px transparent;

#ribbon:before {
    content:'';
    position:absolute;
    bottom:-20px;
    left:0;
    border-top:solid 10px #ff2702;
    border-right:solid 10px #ff2702;
    border-bottom:solid 10px transparent;
    border-left:solid 10px transparent;
}
#ribbon:after {
    content:'';
    position:absolute;
    bottom:-20px;
    right:0;
    border-top:solid 10px #ff2702;
    border-right:solid 10px transparent;
    border-bottom:solid 10px transparent;
    border-left:solid 10px #ff2702;
}
</style>

<div id="box"><div id="ribbon"> HTML & CSS </div>

Sumber by. Stackoverflow
Edited by. Myscript2010

SAMPLE HTML5