I'm having trouble with borders overlapping themselves because of the different width the border-top has.
Here is an example code of my problem:
http://jsfiddle.net/u7KhX/
.border{ width: 200px; height: 200px; border-top:5px solid #894b9d; border-right: 1px solid #dad9d9; border-bottom: 1px solid #dad9d9; border-left: 1px solid #dad9d9;
As you can see the purple part is not complete.
Any Ideas?
You can make the top border a perfect rectangle and still have the other borders the way you want them by using the div's ::after pseudo element.
Put the top border on the div itself and the other three borders on the pseudo-element.
For example:
.border {
width: 200px; height: 200px; border-top:5px solid #894b9d;
padding: 0 1px 1px 1px;
position:relative;
}
.border::after {
display:block; content:'';
position:absolute; top:0; left:0;
width:200px; height:200px;
border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}
See updated fiddle.
Edit:
Or if you don't want to rely on a given width and height, like this:
.border {
display:inline-block;
position:relative;
padding:.5em;
border-top:5px solid #894b9d;
}
.border::after {
display:block; content:'';
position:absolute; top:0; left:0;
width:100%; height:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}
I've made it an inline-block, to show that it works fine with dynamic content sizes, but you can work with all kinds of widths.
more updated fiddle.
The spec is pretty vague about this, but all browsers implement it the same way:
Wherever 2 borders meet, there will always be an abrupt diagonal line.
This has been put to good use, by making triangle & other shapes in pure CSS. Check out this gallery:
The shapes of CSS, by Chris Coyer.
Related
Is it possible to achieve this slanted sidebar layout with CSS? The right side would be the main content where I assume the slanted sidebar layout could overlap the extra. Thanks for reading!
Try something like this..
#shape {
border-top: 100px solid green;
border-right: 20px solid transparent;
height: 0;
width: 100px;
}
Fiddle: http://jsfiddle.net/3wLJj/1/
more info: http://css-tricks.com/examples/ShapesOfCSS/
If you are going to add some text, or elements inside the green div, it is better to do it this way than creating only a shape.
Fiddle
.main{
width:60%;
background:green;
height:400px;
position:relative;
color:white;
}
.main:after{
content:'';
position:absolute;
right:-40px;
border-top: 400px solid green;
border-right: 40px solid transparent;
}
.side{
margin-left:10%;
width:30%;
}
Is it possible to recreate a box like this without using background images and only one element?
Ideally, I'd be able to control which corners are darkened by adding a class, so the above image might be class="box dark-top dark-left dark-bottom dark-right". I can darken two by using :before and :after, but am having problems thinking of a good way to darken three or four corners without adding additional markup.
Here's a way to darken all four corners with one element, though I haven't figured out how to darken specific corners yet. But my theory was to have the original border as the dark border, and then /lighten/ the sides of the box with pseudo-elements.
Fiddle: http://jsfiddle.net/KZSLH/
.box {width:236px; height:236px; border:1px solid #333; position:relative;}
.box:before {content:""; display:block; width:200px; height:236px; position:absolute; top:-1px; left:18px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.box:after {content:""; display:block; width:236px; height:200px; position:absolute; top:18px; left:-1px; border-left:1px solid #ccc; border-right:1px solid #ccc;}
It's far from perfect, but this is the only way I could think of to do something like that... You'll want to play around with the border thickness, border radius and which borders are rounded to really have it suit your needs
The only thing I couldn't figure out is how to get the edges of the corners to be sharp rather than tapering off... Maybe someone could contribute that part?
First, start off with two overlapping div elements:
<div id="thick" />
<div id="thin" />
Then, use rounded corners and relative positioning to taper off and create the "bold" corners.
#thick {
position:absolute;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:white;
border:3px solid black;
}
#thin {
position:relative;
top:-2px;
left:-2px;
height:104px;
width:104px;
background-color:white;
border-radius: 15px;
}
Here is a fiddle: http://jsfiddle.net/bGrdA/
And credit to this post for giving me the idea.
I think I figured it out. The key is that there must be content inside of the box in it's own element, which will always be the case my scenario.
Example: http://jsfiddle.net/n7pgP/
The classes that can be added to the box are:
dtl = darken top left
dtr = darken top right
dbl = darken bottom left
dbr = darken bottom right
Some thing this can be tried out for two elements
http://jsfiddle.net/V8jmR/
#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:red; /* or whatever colour */
border-style:solid; /* or whatever style */
content: ' ';
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}
Original answer
CSS - show only corner border
The only possibility I know is in using additional elements:
<div class="box">
<span class="darkTopLeft"></span>
<span class="darkTopRight"></span>
<span class="darkBottomLeft"></span>
<span class="darkBottomRight"></span>
</div>
.box {
background-color: #fff;
border: 1px solid #ccc;
height: 100px;
position: relative;
width: 100px;
}
.box > span {
height: 10px;
position: absolute;
width: 10px;
}
.darkTopLeft {
border-left: 1px solid #000;
border-top: 1px solid #000;
left: -1px;
top: -1px;
}
.darkTopRight {
border-right: 1px solid #000;
border-top: 1px solid #000;
right: -1px;
top: -1px;
}
.darkBottomLeft {
bottom: -1px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
left: -1px;
}
.darkBottomRight {
bottom: -1px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
right: -1px;
}
http://jsfiddle.net/cM7xU/
Whenever I try to set left and right border for an inline-block element in my code, it won't work unless I set all.
border:2px solid black; /* does work */
border:0 2px solid black; /* doesn't work*/
Any idea?
the relevant part of CSS:
#highlights2{
width:640px;
text-align:left;
}
#highlights2 .highlight{
width:211px;
display:inline-block;
height:100px;
background-color:#0dc1d0;
}
#centerhighlight{
border:0 2px solid rgba(0,0,0,0.5);
border:2px solid black;
}
and HTML:
<div id="highlights2"><div class="highlight">asd</div><div style="" class="highlight" id="centerhighlight">fgh</div><div class="highlight">jkl</div></div>
This syntax is not valid for defining borders. If you want different styles for vertical and horizontal borders you need to write it longhand, for example:
border: 2px solid black;
border-top-width: 0;
border-bottom-width: 0;
If you want to use the shorthand for border width, you can use this:
border-width:0 2px;
border-style: solid;
border-color: black;
jsFiddle
How do you create a tapered css border like around the top of the body of www.khanacademy.org.
It looks like they're doing something with the margin, but when I copy it to mine it doesn't work. Here's my css:
#center{
margin:0 1px;
/* margin-top: 0px; the part I copied from KhanAcadmey
margin-right:1px;
margin-left: 1px;
margin-bottom:1px;*/
border-left:1px solid #3D3D3D;
border-right:1px solid #3D3D3D;
float:left;
width:46%;
height:100%;
z-index:5;
}
Take a look at #page-container and #page-container-inner. It looks like the tapered border is done using two images: one for the left border and one for the right.
I have tried to create a triangle with CSS and it looks good, however I have now got a problem implementing it after a box.
Check out my example and you will see what I mean:
https://jsfiddle.net/TTVuS/
It seems like the triangle after .box gets "cut off" and I have absolutely no idea why this happens.
I want it to look like .arrow.
I have tried to change dimensions of the box, the triangle etc. but nothing worked.
p.s. here is the css in case Jsfiddle is slow or not available again:
.box{
background:red;
height:40px;
width:100px;
}
/*the triangle but its being cut off*/
.box:after{
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
/*the triangle how it should look like*/
.arrow{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
Changing the triangle to position: absolute; and adding position: relative; to the .box fixes it. It seems to be inheriting the height of the box.
if you want to do [this][1] !
insert an div class arrow in the div class box may be the only solution.
[1]: https://jsfiddle.net/ouvqLa3k/
html{
padding:50px
}
.box{
position : relative;
background:red;
height:40px;
width:100px;
border : 0px;
}
/*
.box:after{
position : relative;
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
*/
.arrow{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
<div class="box">
<div class="arrow">
</div>
</div>
<br><br><br>
<div class="arrow">
</div>