Hello I Want to Stylize Step Menu like attached image here. How can i stylize this? Main issue is border at right side of menu.
Check My JSFiddle URL https://jsfiddle.net/hcx1pv8x/ , i have made different style with triangular border effect though.
My HTML Content for this is:
<div class="steps">
<div class="row">
Step 1
Step 2
Step 3
</div>
</div>
You can write code as mentioned below
.btn.btn-default {
background: grey;
padding: 22px 10px;
border-radius: 0;
border: none;
box-shadow: none;
color: #fff;
text-transform: uppercase;
position:relative;
}
.btn.btn-default:after {
width: 0;
height: 0;
border-top: 65px solid grey;
border-right: 25px solid transparent;
content: "";
top: 0;
position: absolute;
z-index: 1;
right: -24px;
}
.btn.btn-default:before {
width: 0;
height: 0;
border-top: 65px solid #000;
border-right: 25px solid transparent;
content: "";
top: 0;
position: absolute;
z-index: 1;
right: -25px;
}
.steps .btn.btn-default:last-child:after,.steps .btn.btn-default:last-child:before{display:none;}
.btn.btn-default:hover,.btn.btn-default:focus,.btn.btn-default:active,.btn.btn-default:active:focus{color:#fff;background:red;}
.btn.btn-default.active:hover,.btn.btn-default.active:focus,default.active:active{color:#fff;background:red;}
.steps {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.btn.btn-default.active {
background: red;
color:#fff;
box-shadow:none;
}
.btn.btn-default.active:after,.btn.btn-default:hover:after,.btn.btn-default:focus:after,.btn.btn-default:active:after,.btn.btn-default:active:focus:after{
border-top: 65px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="steps">
<div class="">
Step 1
Step 2
Step 3
</div>
</div>
Related
I am trying to make a div with decoration borders. This div should be:
responsive
react to an resize operation
and adjust it's height and width depending on the embeded image
What I have figured out yet is this fiddle example and the final solution should be looks like exactly in this way:
.stack {
margin-top: 50px;
}
.c1 {
position: absolute;
z-index: 10;
border: 1px solid black;
width: 300px;
height: 300px;
background: red;
}
.c1 img {
width: 300px;
}
.c2 {
position: absolute;
z-index: 5;
background: bluex;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -5px;
margin-left: 6px;
width: 300px;
height: 300px;
}
.c3 {
position: absolute;
z-index: 1;
background: yellowx;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -10px;
margin-left: 11px;
width: 300px;
height: 300px;
}
<div class="stack">
<div class="c1">
<img src="https://dummyimage.com/300.png/09f/fff" />
</div>
<div class="c2"></div>
<div class="c3"></div>
</div>
Can anyone help me, to extend or rebuild this for the other requirements.
You can try multiple box-shadow
img {
border: 2px solid;
margin: 20px;
box-shadow:
6px -6px 0 #fff,
8px -8px 0 #000,
12px -12px 0 #fff,
14px -14px 0 #000;
}
<img src="https://dummyimage.com/300.png/09f/fff" />
I think this is what u need.
<div class="stack">
<div class="c1">
</div>
<div class="c2-a"></div>
<div class="c2-b"></div>
<div class="c3-a"></div>
</div>
.stack {
margin-top:50px;
position:relative;
}
.c1 {
z-index: 10;
border: 1px solid red;
width:95%;
background:red;
background-image:url('https://dummyimage.com/300.png/09f/fff');
background-repeat:no-repeat;
background-size:100% auto;
padding-top:70%; /*adjust the padding value */
}
.c2-a {
position:absolute;
z-index: 5;
background:bluex;
border-top: 1px solid black;
top:-7px;
right:3%;
width:90%;
}
.c2-b {
position:absolute;
z-index: 5;
background:bluex;
border-top: 1px solid black;
top:-15px;
right:0;
width:80%;
}
.c3-a {
position:absolute;
z-index: 1;
background:yellowx;
border-right: 1px solid black;
right:0;
top:-15px;
padding-top:70%;
}
.c3-b {
/* create the onther line lol */
}
http://jsfiddle.net/kqjwv48r/4/
Different solution with jquery:
$(document).ready(function(){
var width = $(".c1").width();
$(".c2").css({'width':(width +'px'), 'height':(width +'px')});
$(".c3").css({'width':(width +'px'), 'height':(width +'px')});
});
.stack {
margin-top: 50px;
}
.c1 {
position: absolute;
z-index: 10;
display: inline-block;
}
.c1 img {
box-sizing: border-box;
border: 1px solid black;
}
.c2 {
position: absolute;
z-index: 5;
background: bluex;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -8px;
margin-left: 8px;
}
.c3 {
position: absolute;
z-index: 1;
background: yellowx;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -15px;
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stack">
<div class="c1">
<img src="https://dummyimage.com/200.png/09f/fff" />
</div>
<div class="c3"></div>
<div class="c2"></div>
</div>
This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 6 years ago.
I am trying to add red borders to the triangle in the top left corner of the dropdown. But the problem is that the triangle itself is built as borders. So I've got no idea how to do that. Help me please.
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
position: absolute;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
margin-top: 20px;
z-index: 1;
border-color: red;
border-width: thin;
border-style: solid;
}
.dropdown-content a{
display: block;
}
.dropdown-content:after {
position: absolute;
left: 70%;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid yellow;
}
<div class='dropdown'>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You can add the triangle borders with another pseudo element.
.dropdown-content:before,
.dropdown-content:after {
position: absolute;
left: 70%;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom-width: 20px;
border-bottom-style: solid;
}
.dropdown-content:before {
top: -21px; /* extra -1 pixel offset at the top */
border-bottom-color: red;
}
.dropdown-content:after {
top: -20px;
border-bottom-color: yellow;
}
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
position: absolute;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
margin-top: 20px;
z-index: 1;
border-color: red;
border-width: thin;
border-style: solid;
}
.dropdown-content a {
display: block;
}
.dropdown-content:before,
.dropdown-content:after {
position: absolute;
left: 70%;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom-width: 20px;
border-bottom-style: solid;
}
.dropdown-content:before {
top: -21px; /* extra -1 pixel offset at the top */
border-bottom-color: red;
}
.dropdown-content:after {
top: -20px;
border-bottom-color: yellow;
}
<div class='dropdown'>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Try creating inner triangle which is smaller.
Check this answer: Adding border to CSS triangle
And this: CSS triangle custom border color
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 7 years ago.
I have a css arrow top that I want to display in the top of the div, like this:
the problem is, the arrow is inside the div...
what is wrong here?
#news {
position:absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#news:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/
Your positioning code was just a little bit off. The best way to position the arrow pseudoelement (thanks to #vals) is to use bottom: 100% along with margin: auto, left: 0, and right: 0. That way your arrow will always stay in the correct position even if you decide to change the arrow's size.
Here is a working live demo:
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
}
#bellnews:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>
JSFiddle Version: https://jsfiddle.net/3huzc74a/3/
Using absolute positioning with left:calc(50% - 5px); will always keep it in the middle no matter the width.
Here's a fiddle
#bellnews {
position:relative;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
display:inline-block;
}
#bellnews:before {
content: "";
position:absolute;
bottom:100%;
width: 0;
height: 0;
left:calc(50% - 5px);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>
Try this one with position relative on parent and absolute on child:
#bellnews {
position:relative;
width: 140px;
height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
top: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/2/
You need to make :before pseudo element absolute .
Then use top to control the position of the pseudo element.
This is a nice tutorial to understand the basics.
Working code
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
width: 100px
}
#bellnews:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
position: absolute;
top: -5px;
}
<div id=bellnews>
</div>
If you make the position on the #news div relative, and the triangle absolute, it should work.
Updated your fiddle: https://jsfiddle.net/3huzc74a/7/
#bellnews {
position: absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
top: -5px;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
It's 2013 now and im just wondering if there has come a better way to achieve this? Is there a way to do this with just one element?
div.linetop { border-top: 1px solid #111111; }
div.linebottom { border-top: 1px solid #292929; }
// make a line
<div class="linetop"></div>
<div class="linebottom"></div>
Edit
This is what happens with HR the first pixel is grey :/ (im using chrome btw dont have any other browsers):
Tried both:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
and
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
Edit
Solved it! Simply adding border:none before
hr {
border: none;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
You could use the <hr> tag, and use both border-top and border-bottom:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
The HTML is simply: <hr>.
jsFiddle here.
Possible alternative solutions:
1. CSS gradients - support info
HTML: <div class='v1'></div>
Relevant CSS:
.v1 {
background: linear-gradient(#111 50%, #292929 50%) no-repeat 50% 75%;
background-size: 80% 2px;
}
2. a :before pseudo-element & a box-shadow - support info
HTML: <div class='v2'></div>
Relevant CSS:
.v2 { position: relative; }
.v2:before {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
box-shadow: 0 1px #292929;
background: #111;
content: '';
}
3. :before and :after pseudo-elements - support info
HTML: <div class='v3'></div>
Relevant CSS:
.v3 { position: relative; }
.v3:before, .v3:after {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
background: #111;
content: '';
}
.v3:after { margin-bottom: -1px; background: #292929; }
demo
You can use <hr> tag, and use border-top and border-bottom to define you two lines color:
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #08f;
border-bottom: 1px solid #666;
}
CSS
#hrtag {
border-bottom: green 2px solid;
border-top: red 2px solid;
}
HTML
<hr id="hrtag"/>
If you want it to be a class then just swap the # for . and id for class. In the CSS, you can change the color to whatever you want. This was tested in Chrome.
Would you try box-shadow,like this:
HTML
<div class="hr"></div>
CCS
.hr{
border-top: 1px solid #111;
box-shadow: 0 1px 0 #292929;
}
Please view the demo.
How to add arrow shaped under active tab?
.nav-tabs2 .active { background-image:url(http://www.asiarooms.com/assets/themes/v1/images/areas/details/menu-arrow.png); background-repeat:no-repeat; background-position:bottom center; }
http://jsfiddle.net/DJHZb/13/
<div class="box-head tabs">
<ul class="nav2 nav-tabs2">
<li class="active">
Active Tab</li>
<li>Inactive Tab</li>
<li>Inactive Tab #2</li>
</ul>
</div>
Take a look at "css speech bubble" the idea is the same: http://nicolasgallagher.com/pure-css-speech-bubbles/demo
You have to mess with pseudo css ::after and ::before (which doesn't work in some IE), and borders to create a square or an triangle that overlapping each other.
Example:
.active::after {
content: "";
position: absolute;
bottom: -15px;
left: 50px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent;
display: block;
width: 0;
}
Here is an explanation how to create triangle with a box and border: http://www.sitepoint.com/pure-css3-speech-bubbles/
For a code like this (which uses bootstrap):
<body>
<div class="panel panel-primary">
<div class="panel-heading" style="font-size:large">
Klujo
</div>
<div class="panel-body">
<div class="wizard">
<a >
Step 1<br>
Authorize the app
</a>
<a class="active">
Step 2<br>
Post your jobs
</a>
</div>
</div>
</div>
</body>
you can use css like this:
.wizard a {
background: #efefef;
display: inline-block;
margin-right: 5px;
min-width: 150px;
outline: none;
padding: 10px 40px 10px;
position: relative;
text-decoration: none;
}
.wizard .active {
background: #007ACC;
color: #fff;
}
.wizard a:before {
width: 0;
height: 0;
border-top: 25px inset transparent;
border-bottom: 35px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: "";
top: 0;
left: 0;
}
.wizard a:after {
width: 0;
height: 0;
border-top: 35px inset transparent;
border-bottom: 25px inset transparent;
border-left: 21px solid #efefef;
position: absolute;
content: "";
top: 0;
right: -20px;
z-index: 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
border: none;
}
.wizard a.active:after {
border-left: 21px solid #007ACC;
}
to get the desired result
</body>
<style>
.tool {
position: relative;
display: inline-block;
border-bottom: 1px dotted red;
}
.tool .text {
visibility: hidden;
width: 100%;
background-color: blue;
color: white;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
top: -1px;
left: 110%;
}
.tool .text::after {
content: "";
position: absolute;
top: 10%;
right: 99%;
margin-top: -2px;
border-width: 5px;
border-style: solid;
border-color: transparent blue transparent transparent;
}
.tool:hover .text {
visibility: visible;
}
</style>
<div class="tool">Mouse Hover
<span class="text">I Can pop up on the right side of these words</div>
</body>