我想将css色带的位置从右侧更改为左侧，并且色带的方向也应在左侧相应地更改。一些图像和文本等项目将放置在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;
}
答案 0 :(得分：0)
这是一个现场的小提琴： 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;
}
答案 1 :(得分：-1)
* {
padding: 0;
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;
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;
font-size: 18px;
line-height: 18px;
}
#ribbon-container:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 3px;
right: 0;
/* here right will be zero to move ribbon right to left */
border-top: 29px solid rgba(0, 0, 0, .3);
border-bottom: 29px solid rgba(0, 0, 0, .3);
border-right: 29px solid transparent;
/* in same way border right will be transparent instead of border left */
border-left: 29px solid rgba(0, 0, 0, .3);
}
#ribbon-container:after {
content: "";
height: 3px;
background: rgba(0, 0, 0, .3);
display: block;
position: absolute;
bottom: -3px;
right: 58px;
/* here just left property is renamed with right property */
left: 4px;
}
#ribbon-container a {
display: block;
padding: 20px;
position: relative;
background: #0089d0;
overflow: visible;
height: 58px;
margin-right: 29px;
/* here margin left is replaced with margin right */
color: #fff;
text-decoration: none;
}
#ribbon-container a:after {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
bottom: -15px;
left: 0;
/* right is replaced with left */
border-top: 15px solid #004a70;
border-left: 15px solid transparent;
/* here border left is transparent instead if border right */
}
#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;
/* here left is replaced with right */
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;
}<div class="content-box">
<div id="ribbon-container">
<a href="#" id="ribbon">CSS-Ribbon</a>
</div>
</div>