javascript - 在 div 上从右到左更改 css-ribbon 位置

Question

我想将css-ribbon的位置从右侧更改为左侧，并且ribbon的方向也应在左侧相应更改。一些图像和文本等项目将放置在div中，这些元素不会受到功能区本身的干扰。这是我的 html 代码。

<div class="content-box">
        <div id="ribbon-container">
            <a href="#" id="ribbon">CSS-Ribbon</a>
        </div>
    </div>

这是我下面的css代码。

* {
    padding: 0;
    /* Standard Reset, and we're adding box-sizing:border-box because it's awesome. */
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}
.content-box {
    width: 100%;
    height: 400px;
    max-width: 80%;
    margin: 94px auto 0 auto;
    position: relative;
    /* So we can position the banner within the box */
    background: gray;
    border: 5px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
#ribbon-container {
    position: absolute;
    top: 15px;
    right: -20px;
    overflow: visible;
    /* so we can see the pseudo-elements we're going to add to the anchor */
    font-size: 18px;
    /* font-size and line-height must be equal so we can account for the height of the banner */
    line-height: 18px;
}
#ribbon-container:before {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    top: 3px;
    left: 0;
    border-top: 29px solid rgba(0, 0, 0, .3);
    /* These 4 border properties create the first part of our drop-shadow */
    border-bottom: 29px solid rgba(0, 0, 0, .3);
    border-right: 29px solid rgba(0, 0, 0, .3);
    border-left: 29px solid transparent;
}
#ribbon-container:after {
    /* This adds the second part of our dropshadow */
    content: "";
    height: 3px;
    background: rgba(0, 0, 0, .3);
    display: block;
    position: absolute;
    bottom: -3px;
    left: 58px;
    right: 3px;
}
#ribbon-container a {
    display: block;
    padding: 20px;
    position: relative;
    /* allows us to position our pseudo-elements properly */
    background: #0089d0;
    overflow: visible;
    height: 58px;
    margin-left: 29px;
    color: #fff;
    text-decoration: none;
}
#ribbon-container a:after {
    /* this creates the "folded" part of our ribbon */
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    bottom: -15px;
    right: 0;
    border-top: 15px solid #004a70;
    border-right: 15px solid transparent;
}
#ribbon-container a:before {
    /* this creates the "forked" part of our ribbon */
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    top: 0;
    left: -29px;
    border-top: 29px solid #0089d0;
    border-bottom: 29px solid #0089d0;
    border-right: 29px solid transparent;
    border-left: 29px solid transparent;
}
#ribbon-container a:hover {
    background: #009ff1;
}
#ribbon-container a:hover:before {
    /* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
    border-top: 29px solid #009ff1;
    border-bottom: 29px solid #009ff1;
}

标签： javascriptphphtmlcss

Answer 1

这是一个现场小提琴：http: //jsfiddle.net/covn07uh/14/

HTML（相同）：

<div class="content-box">
    <div id="ribbon-container">
        <a href="#" id="ribbon">CSS-Ribbon</a>
    </div>
</div>

CSS：

* {
    padding: 0;
    /* Standard Reset, and we're adding box-sizing:border-box because it's awesome. */
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}
.content-box {
    width: 100%;
    height: 400px;
    max-width: 80%;
    margin: 94px auto 0 auto;
    position: relative;
    /* So we can position the banner within the box */
    background: gray;
    border: 5px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
#ribbon-container {
    position: absolute;
    top: 15px;
    left: -20px;
    overflow: visible;
    /* so we can see the pseudo-elements we're going to add to the anchor */
    font-size: 18px;
    /* font-size and line-height must be equal so we can account for the height of the banner */
    line-height: 18px;
}
#ribbon-container:before {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    top: 3px;
    right: 0;
    border-top: 29px solid rgba(0, 0, 0, .3);
    /* These 4 border properties create the first part of our drop-shadow */
    border-bottom: 29px solid rgba(0, 0, 0, .3);
    border-left: 29px solid rgba(0, 0, 0, .3);
    border-right: 29px solid transparent;
}
#ribbon-container:after {
    /* This adds the second part of our dropshadow */
    content: "";
    height: 3px;
    background: rgba(0, 0, 0, .3);
    display: block;
    position: absolute;
    bottom: -3px;
    right: 58px;
    left: 3px;
}
#ribbon-container a {
    display: block;
    padding: 20px;
    position: relative;
    /* allows us to position our pseudo-elements properly */
    background: #0089d0;
    overflow: visible;
    height: 58px;
    margin-right: 29px;
    color: #fff;
    text-decoration: none;
}
#ribbon-container a:after {
    /* this creates the "folded" part of our ribbon */
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    bottom: -15px;
    left: 0;
    border-top: 15px solid #004a70;
    border-left: 15px solid transparent;
}
#ribbon-container a:before {
    /* this creates the "forked" part of our ribbon */
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    top: 0;
    right: -29px;
    border-top: 29px solid #0089d0;
    border-bottom: 29px solid #0089d0;
    border-left: 29px solid transparent;
    border-right: 29px solid transparent;
}
#ribbon-container a:hover {
    background: #009ff1;
}
#ribbon-container a:hover:before {
    /* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
    border-top: 29px solid #009ff1;
    border-bottom: 29px solid #009ff1;
}