I need some trick to insert border blank space by using CSS like this..
I using CSS box-shadow like this
box-shadow:
-1px 0px 0px 0px #000,
0px -1px 0px 0px #000,
0px 1px 0px 0px #000,
1px 1px 0px 0px #000
I have no idea how to make border / shadow look like the picture.
I will use only one html element.. <div></div>
Any trick ?
Playground : http://jsfiddle.net/ES66k/
with one div only: http://jsfiddle.net/ES66k/1/ (tested on Fx18 and chrome)
div {
width:300px;
height:170px;
margin:100px;
border-top: 1px black solid;
border-bottom: 1px black solid;
position: relative;
}
div:after, div:before {
content: "";
position: absolute;
top: -1px;
width: 20px;
height: 172px;
border-top: 40px white solid;
border-bottom: 40px white solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }
It's bit hacky, anyway, since it's relying on a fixed height and on a solid color as background (white) but maybe could be useful for your purpose.
You can create 4 <div>'s with classes .top-left, .top-right, .bottom-left and .bottom-right. Make them absolute and the container relative. Size them, make them the color of the containers bg-color and get them to the corners with top, right, bottom and left properties. Their value must be minus the border width.
Here is example of element with 3px border:
HTML:
<div class="box">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
CSS:
.box{
width: 300px;
height: 300px;
border: 3px solid #666;
position:relative;
}
.corner{
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
}
.top-left{
top: -3px;
left: -3px;
}
.top-right {
top: -3px;
right: -3px;
}
.bottom-left{
bottom: -3px;
left: -3px;
}
.bottom-right{
bottom: -3px;
right: -3px;
}
Try to use the CSS3 attribute border-image:
Here's a demo you can have a look and try out yourself: CSS3 border-image
div {
width:300px;
height:170px;
margin:100px;
position:relative;
background:#ccc;
}
div:before, div:after {
content:"";
position:absolute;
top:0;
left:0;
}
div:before {
width:280px; /*****-20px*****/
height:168px; /*****-2px*****/
margin-left:10px;
border-top:1px solid #f00;
border-bottom:1px solid #f00;
}
div:after {
width:298px; /*****-2px*****/
height:150px; /*****-20px*****/
margin-top:10px;
border-left:1px solid #f00;
border-right:1px solid #f00;
}
Demo : http://jsfiddle.net/ES66k/4/
Done now, Don't need to set background-color :D
But thanks #Fabrizio Calderan anyway :D
Related
Just getting into css and, though trying different approaches, I don't manage to design a content box with the borders I have in mind. It should look something like this:
In words: The borders should cross each other and continue for some maybe 30px, maybe we can call it overflow. Resulting in crosses at all four edges.
I have tried to design small cubic boxes each at every edge, and it kinda works. But I find it very hard to include them in my concept of responsiveness, as they don't shrink at the same rate that the actual box (lets call it <box>) does. The <box> has side margins in percent, so when the page is being scaled down, the small boxes <sbox> are in my way and preventing the margins of <box> from reaching out all the way to the frames borders.
Any ideas on how to make that one more elegant?
You can do this using the help of before and after pseudo classes.
* { box-sizing:border-box; }
.box { padding:20px; width:100px; height:100px; position:relative; border-left:2px solid #000; border-right:2px solid #000; }
.box::after { position:absolute; top:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}
.box::before { position:absolute; bottom:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}
<div class="box">
Content
</div>
Demo
An example without pseudo classes
.outer{
height: 1em;
margin: 0 1em 0 1em;
}
.content{
border: 1px solid #000;
border-left: none;
border-right: none;
}
.innerContent{
margin: 0 1em 0 1em;
}
.borderLeftRight{
border-left: 1px solid #000;
border-right: 1px solid #000;
}
<div class="outer borderLeftRight"></div>
<div class="content">
<div class="innerContent borderLeftRight">
Content
</div>
</div>
<div class="outer borderLeftRight"></div>
Somebody already did something similar. I think the most elegant way is with pseudo selectors :before & :after. I feel you should do it in this way and not with wrappers. Most important things are setting your element's position to relative and then before and after selectors position to absolute. Then fiddle with border and top, bottom, left, right properties.
.box {
display: inline-block;
position: relative;
padding: 2em;
}
.box:after,
.box:before {
position: absolute;
content: "";
}
.box:after {
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
left: 0;
right: 0;
top: 1em;
bottom: 1em;
}
.box:before {
border-left: 1px solid #f00;
border-right: 1px solid #f00;
left: 1em;
right: 1em;
top: 0;
bottom: 0;
}
<div class="box">
text inside
</div>
Just going to put this up here to show you can do this using a single pseudo element.
Fixed width
You will have to set the width and height for it, can get around this using calc but its support isn't amazing yet.
* {
box-sizing: border-box;
}
div {
width: 300px;
height: 200px;
border-top: 1px solid;
border-bottom: 1px solid;
margin: 100px;
position: relative;
padding: 10px 25px;
}
div:after {
content: "";
display: block;
position: absolute;
top: -20px;
left: 20px;
width: 260px;
height: 240px;
border-left: 1px solid;
border-right: 1px solid;
}
<div>Testing</div>
Auto width
Example using calc, this will work with any size of text.
* {
box-sizing: border-box;
}
div {
width: 300px;
height: 200px;
border-top: 1px solid;
border-bottom: 1px solid;
margin: 100px;
position: relative;
padding: 10px 25px;
}
div:after {
content: "";
display: block;
position: absolute;
top: -20px;
left: 20px;
width: calc(100% - 40px);
height: calc(100% + 40px);
border-left: 1px solid;
border-right: 1px solid;
}
<div>Hello</div>
I created the following object with scooped borders ... http://jsfiddle.net/zjw3pg2e/
I want a way using pure CSS to give the object a black border. All my attempts at doing so have thus far failed.
HTML:
<div class="box"></div>
CSS:
.box {
position:relative;
height:200px;
width:200px;
overflow:hidden;
/*border: solid 2px black;*/
}
.box:before{
content:'';
position:absolute;
/*border: solid 2px black;*/
left:0;
margin:-20px;
height:40px;
width:40px;
border-radius:100%;
background:white;
box-shadow:200px 0 0 white,
0 200px 0 white,
200px 200px 0 white,
0 0 0 500px blue;
}
I tried setting the border for .box and .box:before as border: solid black 2px;, but this doesn't do what I am trying to achieve. I need the border to fit the shape of the object perfectly.
I suspect there's a way to do it by altering the box-shadow, but I can't figure it out. Any help is appreciated.
I did it with pure css in this example using 4 extra divs:
If youre worried about overflow you can just wrap it in an extra div.
JS FIDDLE
css:
.corner {
background:#fff;
height:20px;
width:20px;
position:absolute;
}
#sw {
left: -2px;
bottom: -2px;
border-radius: 0px 20px 0px 0px;
border-top: 2px solid #000;
border-right: 2px solid #000;
}
#se {
right: -2px;
bottom: -2px;
border-radius: 20px 0px 0px 0px;
border-top: 2px solid #000;
border-left: 2px solid #000;
}
#nw {
left: -2px;
top: -2px;
border-radius: 0px 0px 20px 0px;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
#ne {
right: -2px;
top: -2px;
border-radius: 0px 0px 0px 20px;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
}
.box {
position:relative;
height:200px;
width:200px;
border: solid 2px black;
background:blue;
border-radius: 5px -5px 5px 5px;
}
html:
<div class="box">
<div id="ne" class="corner"></div>
<div id="nw" class="corner"></div>
<div id="se" class="corner"></div>
<div id="sw" class="corner"></div>
</div>
So the solution I came up with... uses 3 divs (an outer-box, box, and inner-box).
The box:before/:after and box-inner:before/:after are the semi-circles. around the sides, that I gave a white background with a black border.
JS Fiddle
.box-wrapper{
position:relative;
height:202px;
width:202px;
overflow:hidden;
}
.box {
position: absolute;
height:200px;
width:200px;
background: blue;
border: 1px solid #000;
}
.box:before,
.box:after,
.box-inner:before,
.box-inner:after {
background: #fff;
content: ' ';
display: block;
height: 3em;
width: 3em;
border-radius: 50%;
border: solid 1px black;
position: absolute;
}
.box:before {
top: -1.5em;
left: -1.5em;
}
.box:after {
top: -1.5em;
right: -1.5em;
}
.box-inner:before {
bottom: -1.5em;
left: -1.5em;
}
.box-inner:after {
bottom: -1.5em;
right: -1.5em;
}
<div class="box-wrapper">
<div class="box">
<div class="box-inner"></div>
</div>
</div>
Normally you can apply a box-shadow: 0 0 1px #000;, which lets you give a border-like effect on top of borders, however the circles make the relative .box div will always sit on top of its :before/:after (making the box-shadow solution unobtainable).
Please take a look here:
http://jsfiddle.net/ztu267zp/1/
border:3px solid grey;
border-bottom: 8px solid red;
At the bottom corners you can see, that both the grey and the red borders intersect diagonally.
Can I cut the grey border to end at the bottom of the DIV and the red border having 100% width over the full distance?
Thank you very much,
Doing it right now with box-shadows, but also here, there is no clean edge in Chrome and FF:
http://imgur.com/mf7ABEO
Thanks
matt
its not possible but you can use something like this
<div id="bord">
<div class="line-cover">
</div>
css
#bord{
height:200px;
width:200px;
border:3px solid grey;
border-bottom: 8px solid white;
}
.line-cover{
position: relative;
border-bottom: 8px solid red;
width: 100%;
top: 200px;
padding: 0 3px;
left: -3px;
}
Fiddle here
What about st. like that, using pseudoelement after?
#bord{
height:200px;
width:200px;
border:3px solid grey;
border-bottom: 0;
/*border-bottom: 8px solid red;*/
position: relative;
}
#bord:after {
display: block;
background: red;
height: 8px;
width: 100%;
content: '';
position: absolute;
bottom: -8px;
left: 0;
margin: 0 -3px;
padding: 0 3px;
}
http://jsfiddle.net/ztu267zp/4/
I'm trying to make some kind of "triangular ornament" bar with html/css. Can you please tell me how to make such?
Here is the image :
Thanks in advance
I have made this by mixing two triangles and a rectangle see if this is what you want http://jsfiddle.net/xkwbt73v/5/
HTML
<div id="triangle-left"></div>
<div id="triangle-left-down"></div>
<div id="bar"></div>
CSS
#triangle-left {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-left-down {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
#bar{
width:1000px;
height:200px;
background-color:red;
position:absolute;
margin-left:100px;
margin-top:-200px;
}
If you want to do it using one element then have a look at Pseudo-elements - CSS | MDN
HTML:
<figure></figure>
DEMO 1 using Background-image
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before{
content: '';
position: absolute;
left: -60px;
width: 100px;
height: 100%;
background-image: linear-gradient(32deg, transparent 50%, blue 0%),linear-gradient(147deg, transparent 50%, blue 0%);
}
DEMO 2 using 2 elements
CSS:
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before, figure:after{
content:'';
position:absolute;
display:block;
left: -40px;
width:0;
height:0;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
figure:before{
top: 0;
border-top: 32px solid blue;
}
figure:after{
bottom: 0;
border-bottom: 32px solid blue;
}
http://jsfiddle.net/5p4yLrz4/ :)
HTML:
<div class="wrapper">
<div class="triangle"></div>
</div>
CSS:
.wrapper{
width:300px;
background-color:orange;
}
.triangle {
width:0;
border-width: 30px;
border-right:0px;
border-color: transparent transparent transparent yellow;
border-style: solid;
}
I am trying to remove oblique border issue, best to show it in a picture:
Here is the css applied to the div:
.blog_post {background: #fff}
.blog_post .post {
border-right-color: #F1F1F1;
border-top-color: #FF0000;
}
.blog_post .post, .blog_post .sidebar {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #FFFFFF;
border-width: 10px;
}
.blog_post .post {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #9A9570;
border-color: #8F8960 #8F8960 -moz-use-text-color;
border-image: none;
border-style: solid;
border-width: 10px;
float: left;
margin: -560px 0 0 -12px;
padding: 28px 30px;
position: relative;
width: 528px;
z-index: 9;
}
Any help would be greatly appreciated.
Easy way: Another container
You can't do this with traditional HTML borders as they work at shown above (that's how CSS triangles work!). The easiest way to get this effect is to wrap the element in another container.
Demo
HTML
<div class="container">
<div class="inner-container">
...
</div>
</div>
CSS
.container {
border-top:10px solid red;
border-bottom:10px solid red;
}
.inner-container {
border-left:10px solid blue;
border-right:10px solid blue;
}
Hard way: :before and :after
This method is a little more tricky but you can manage to pull it off with only one wrapping element.
Demo
HTML
<div class="container">
...
</div>
CSS
.container {
border-top:10px solid red;
border-bottom:10px solid red;
position:relative;
/* pad out the left and right to allow room for the border */
padding:0 10px;
}
.container:before,
.container:after {
position:absolute;
top:0;
bottom:0;
width:10px;
background-color:blue;
display:block;
content:"";
}
.container:before {
left:0;
}
.container:after {
right:0;
}
You can always use inset box shadows. They are pretty easy to use, and they don't require much CSS, nor do you have to change the HTML.
Check it out. jsFiddle here
div {
box-shadow: inset 0px 10px 0px red;
border: 10px solid blue;
border-top: 0px;
}
Using pseudo-classes :before and :after
.border-fixed {
width: 300px;
height: 300px;
background: #EEE;
margin: 60px auto 0;
border: solid 10px #DDD;
border-top-color: #BBB;
position: relative;
}
.border-fixed:before,
.border-fixed:after {
content: "";
top: -10px;
left: -10px;
position: absolute;
width: 10px;
height: 10px;
background: #BBB;
}
.border-fixed:before {
right: -10px;
left: auto;
}