This question already has an answer here:
Css - Need 'triple' border
(1 answer)
Closed 4 years ago.
Hello Guys I Would Like to Fill a Different Color in My css Double Border.I Know that it is Possible by Using Two Borders.
#parent{
width:100px;
height:100px;
border:1px solid #000;
display:flex;
align-items:center;
justify-content : center;
background-color:red;
}
#child{
width:80px;
height:80px;
border:1px solid #000;
background-color:#fff;
}
<div id="parent">
<div id="child"></div>
</div>
But here I would like to have a solution with a single Border Property(Single <div> or any other Element).So I Used css double Property.Is there is any Possible way to fill color on this double_border?
#element{
width:100px;
height:100px;
border:10px double #000;
}
<div id="element"></div>
Please Note :- Somebody Tagged That This is Possible Duplicate of
Another.Just Please Read Both of the Question before You Tagg. This
question is different,on that question he is asking for color the the
two borders with different color.but here I would like to keep two
borders with same color,I just wanna to fill some color between
them.hope you will understand the problem.
You could also use multiple box-shadows:
#element {
width: 100px;
height: 100px;
box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;
}
<div id="element"></div>
You can by using the border, box-shadow, and outline properties.
#element {
width: 100px;
height: 100px;
border: 3px solid black; /* inner border */
box-shadow: 0px 0px 0px 15px black; /* outer 'border' */
outline: 12px solid green; /* fill */
margin-left: 30px;
margin-top: 30px;
}
<div id="element"></div>
You can use a pseudo-element to accomplish this:
https://jsfiddle.net/82zn96Lu/
#doubleBorder {
text-align: center;
position: relative;
z-index: 10;
padding: 100px;
background: #fff;
border: 6px solid red;
}
#doubleBorder:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 6px solid blue;
}
<div id="doubleBorder">
a double border
</div>
I have a block position absolutely within its parent. The parent has a border left and right. This causes the absolutely positioned block (which also has borders) to be 2px too small.
What is the best way to go about fixing this?
Goal:
I basicly want the two blocks to align. Their borders should basicly look like 1 border. The problem is that even with border-box the child div is smaller and thus doesn't align.
html
<div class="container">
<div class="diagonal"></div>
</div>
css
* {
box-sizing: border-box;
}
body {
background-color:red;
}
.container {
width:1170px;
margin:0 auto;
margin-top:200px;
height:700px;
position:relative;
z-index:3;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
border-width:0 1px 1px 1px;
}
.diagonal {
width:100%;
height:400px;
transform:skewY(-10deg);
position:absolute;
top:-200px;
left:0;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE;
border-width:0 1px;
z-index:-1;
}
JSFiddle
I think you're looking for this:
* {
box-sizing: border-box;
}
This property tells the browser to account for any border and padding in the value you specify for width and height
EDIT :
If you want to have different borders for inner and outer div and you want them to align, then set .diagonal{ left:-1px; } where 1px is width of inner div's border.
I've changed width and color so that result would be easier to notice. NB: In this case you don't need box-sizing: border-box;
body {
background-color: red;
}
.container {
width: 1170px;
margin: 0 auto;
margin-top: 200px;
height: 700px;
position: relative;
z-index: 3;
background-color: white;
border-style: solid;
border-color: transparent black black black;
border-width: 0 3px 3px 3px;
}
.diagonal {
width: 100%;
height: 400px;
transform: skewY(-10deg);
position: absolute;
top: -200px;
left: -3px;
background-color: white;
border-style: solid;
border-color: transparent blue;
border-width: 0 3px;
z-index: -1;
}
<div class="container">
<div class="diagonal"></div>
</div>
This is the illusion that I am attempting to create:
Notice that my designer wants the border cut off in the middle of the div, this is what I need to know how to do. I don't think overlapping with a z-index will work because of how the HTML is laid out.
This is the HTML code of which the structure may not be changed for maximum device compatibility, however, if adding an element is the solution, I believe that may be done:
<div id="nav_icons_con" class="mopn">
<div id="inner_nav_container" class="show_inner_nav">
<div class="nav_link_container">Home</div>
</div>
</div>
Here is the basic current CSS code:
#nav_icons_con {
z-index: 1;
cursor:pointer;
height: 5.005em;
width: 5.005em;background-image:url(background.png);
background-size:70%;
background-repeat:no-repeat;
background-position:center;
margin:.385em .385em 0 0;
}
#nav_icons_con.mopn{
background-color:#FFF;
border:2px solid #83C5E6;
border-bottom:none;
box-shadow:5px 5px 10px #666;
}
#inner_nav_container, .inner_nav_container{
cursor:pointer;
display:none;
position:absolute;
top:5.39em;
right:.385em;
width:12.5em;
white-space:normal;
background-color:#FFF;
border:2px solid #83C5E6;
border-top:none;
box-shadow:5px 5px 10px #666;
}
#inner_nav_container.show_inner_nav, .inner_nav_container.show_inner_nav{display:block;}
The typical way to do this is to position the tab element over the sub element, so as to cover up that section of the border. However, the use of box-shadow complicates this.
One way is to add another element inside the root element, so that the root element can still cast the shadow, but the element inside is positioned above. See my code below, for a basic example.
Working Example:
.icon {
width: 50px;
height: 50px;
position: relative;
/*Create the shape for the shadow.*/
border: 5px solid #83C5E6;
box-shadow: 5px 5px 10px #666;
}
.icon-content {
background: #fff;
position: relative;
/*Move back over the border.*/
top: -5px;
left: -5px;
/*Make tall enough to cover the top border.*/
width: 50px;
height: 55px;
/*Add border, except on the bottom.*/
border: 5px solid #83C5E6;
border-bottom: 0;
/*Position up a layer.*/
z-index: 1;
}
.nav {
position: absolute;
left: -5px;
top: 100%;
width: 400px;
padding: 1em;
background: #fff;
border: 5px solid #83C5E6;
box-shadow: 5px 5px 10px #666;
}
<div class="icon">
<div class="icon-content">
</div>
<div class="nav">
<div class="item">Home</div>
</div>
</div>
This question already has answers here:
How do CSS triangles work?
(23 answers)
Creating a transparent arrow above image in CSS3
(2 answers)
Closed 9 years ago.
Respected stackoverflowers,
How do i create a triangle element with the background pattern?
For example i need the div like this :
But my state is like this :
All examples with triangle elements use borders which cant have an img in that ....
This is my subsection class which needs the coolarrow:
<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div>
.subsection {
.box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3));
background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern
display: block;
clear: both;
float: left;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
display: none;
}
.subsection {
position:relative;
}
.subsection:before {
content:'';
position:absolute;
top:0;
left:0;
height:20px;
width:0;
border-left:20px solid white;
border-bottom:16px solid transparent;
}
.subsection:after {
content:'';
position:absolute;
top:36px;
left:0;
bottom:0;
width:0;
border-left:20px solid white;
border-top:16px solid transparent;
}
And im getting :
Which is fine ...how can i bring the arrow on the top in the required form ? ... and overlaying the cases div ? ...
Thanks.
If you don't care for cross browser compatibility, you can use a pseudo-element that you rotate by 45 degrees and attach the styles to it. The only thing you need additionally would be the background, rotated (back) by 45deg to attach to the pseudo element:
div.coolarrow:before {
content: '';
position: absolute;
z-index: -1;
top: -24.7px;
left: 10px;
background-color: #bada55;
width: 50px;
height: 50px;
background: url(url/to/your/45deg/rotated/background.gif);
box-shadow: inset 0 0 10px #000000;
transform: rotate(45deg);
}
Here's a short fiddle to illustrate (without background):
Fiddle
To work this out for other cases but 90degree arrows, you need to skew the rect additionaly. And I don't really know what then happens with the background image...
Put the image as a background for a div, and just put negative values for the margin to make it overlay on the bar. Example (although estimated, in no way do I claim this to work) would be margin-left: -20px; margin-top: -20px; and have it after the line.
Alternatively go with #Py's answer, and you can use this CSS for the arrow, and do the same negative margins to make it line up.
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; }
go on http://apps.eky.hk/css-triangle-generator/ and generate it :D
OR
#triangle {
width: 0;
height: 0;
border-bottom: 120px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>