I have sidebar menu finally created. now I need create ribbon on selected item like show image (red) (I need really gray color ribbon). But I don't want use image background and use only css class. So dynamically I can remove class name and add to another item.
I have a you_are_here class which selected item in that I want see ribbon. Is it possible to do that?
<ul class="outer">
<li>
<p class="top">My Account</p>
<ul class="inner">
<li><a href="#">My Account Home</a></li>
</ul>
</li>
<li>
<p>Demographics</p>
<ul class="inner">
<li><a href="#">Addresses</a></li>
<li class="you_are_here"><a href="#">Contact Information</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">Change Password</a></li>
</ul>
</li>
</ul>
.outer P, .inner P { padding: 0.25em 0.75em; }
.outer>LI>P { font-weight: bolder; margin: 1em 0 0 0.5em; }
.outer>LI>P.top {
margin: 0; background: #eee; background: linear-gradient(0deg, #DCDCDC, #F6F6F6);
-webkit-box-shadow: 0 0 20px rgba(219,215,219,1);
-moz-box-shadow: 0 0 20px rgba(219,215,219,1);
-ms-box-shadow: 0 0 20px rgba(219,215,219,1);
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border: 1px solid #bbbbbb;
font-size: 150%;
background-repeat:no-repeat;
-webkit-background-size:120%;
}
.outer {
border: 1px solid #bbb;
-webkit-box-shadow: 0 0 20px rgba(219,215,219,1);
-moz-box-shadow: 0 0 20px rgba(219,215,219,1);
-ms-box-shadow: 0 0 20px rgba(219,215,219,1);
box-shadow: 0 0 20px #dbd7db;
box-shadow: 0 0 20px rgba(219,215,219,1);
-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
.outer { padding: 0;width: 90%;font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
UL.outer, UL.inner { list-style: none; padding: 0 }
.outer LI { padding: 0; border: none; }
.inner LI { padding: 0.25em 1.75em; border: 1px solid white;font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.inner LI:hover { border: 1px solid #ddd; background: #eee; }
LI.you_are_here { background: #ddd; border: 1px solid #bbb; }
LI.you_are_here A { color: black; text-decoration: none; font-weight: bolder; }
JSfiddle
something like this
this will have to be adapted to your needs, but something using pseudo elements would make this possible:
.box{
height:300px;
width:300px;
box-shadow:inset 0 0 15px #222;
position:relative;
margin:0 auto;
background:gray;
}
.active{
position:absolute;
top:30px;
left:-5%;
height:30px;
width:105%;
background:tomato;
border-radius: 5px 0 0 0;
}
.active:before{
content:"";
position:absolute;
height:16px;
top:5px;
left:0;
width:100%;
border-top:2px dashed red;
border-bottom:2px dashed red;
}
.active:after{
content:"";
position:absolute;
right:-10px;
height:20px;
width:20px;
top:5px;
background:tomato;
border-radius: 0 5px 0 0;
transform:rotate(45deg);
}
.active a{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
text-align:center;
display:inline-block;
text-decoration:none;
line-height:30px;
}
.active a:after{
content:"";
position:absolute;
bottom:-15px;
left:6px;
height:30px;
width:30px;
background:darkred;;
transform:rotate(45deg);
z-index:-2;
}<div class="box">
<div class="active">
<a href="#">some text</a>
</div>
</div>note
the transform property will require prefixes as well.
it's real with CSS3.
maybe like this:) but you need to customize.
html:
* {
box-sizing: border-box;
}
.container {
width: 80%;
max-width: 1000px;
height: 80px;
margin: 40px auto;
position: relative;
}
.one > div {
height: 50px;
}
.main {
background: #0fadc0;
position: relative;
display: block;
width: 90%;
left: 50%;
top: 0;
padding: 5px;
margin-left: -45%;
z-index: 10;
}
.main > div {
border: 1px dashed #fff;
border-color: rgba(255, 255, 255, 0.5);
height: 40px;
}
.bk {
background: #1199a9;
position: absolute;
width: 8%;
top: 12px;
}
.bk.l {
left: 0;
}
.bk.r {
right: 0;
}
.skew {
position: absolute;
background: #0c7582;
width: 3%;
top: 6px;
z-index: 5;
}
.skew.l {
left: 5%;
transform: skew(00deg, 20deg);
}
.skew.r {
right: 5%;
transform: skew(00deg, -20deg);
}
.bk.l > div {
left: -30px;
}
.bk.r > div {
right: -30px;
}
.arrow {
height: 25px !important;
position: absolute;
z-index: 2;
width: 0;
height: 0;
}
.arrow.top {
top: 0px;
border-top: 0px solid transparent;
border-bottom: 25px solid transparent;
border-right: 30px solid #1199a9;
}
.arrow.bottom {
top: 25px;
border-top: 25px solid transparent;
border-bottom: 0px solid transparent;
border-right: 30px solid #1199a9;
}
.r .bottom {
border-top: 25px solid transparent;
border-bottom: 0px solid transparent;
border-left: 30px solid #1199a9;
border-right: none;
}
.r .top {
border-bottom: 25px solid transparent;
border-top: 0px solid transparent;
border-left: 30px solid #1199a9;
border-right: none;
}
@media all and (max-width: 1020px) {
.skew.l {
left: 5%;
transform: skew(00deg, 25deg);
}
.skew.r {
right: 5%;
transform: skew(00deg, -25deg);
}
}
@media all and (max-width: 680px) {
.skew.l {
left: 5%;
transform: skew(00deg, 30deg);
}
.skew.r {
right: 5%;
transform: skew(00deg, -30deg);
}
}
@media all and (max-width: 460px) {
.skew.l {
left: 5%;
transform: skew(00deg, 40deg);
}
.skew.r {
right: 5%;
transform: skew(00deg, -40deg);
}
}<!-- RIBBON 1 -->
<div class="container one">
<div class="bk l">
<div class="arrow top"></div>
<div class="arrow bottom"></div>
</div>
<div class="skew l"></div>
<div class="main">
<div></div>
</div>
<div class="skew r"></div>
<div class="bk r">
<div class="arrow top"></div>
<div class="arrow bottom"></div>
</div>
</div>https://jsfiddle.net/5pu4rqr8/
this is a pure copy/paste from @willpaige's CodePen
来源：https://stackoverflow.com/questions/29829008/create-ribbon-with-css