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.
Related
Have a rather simple spoiler code for my website. It has sort of large border radii, which is fine when the element is expanded, but not so much when shrunk. Is there some way I can make the bottom border radii just go to 0px when its shrunk, or is that just not a thing with CSS?
And I would, yes, like it to be a CSS solution. It's no real problem for me to have to shrink the border radius, but y'know, might as well try to not if its possible.
I am not sure how to make the javascript my code uses work on stackoverflow (it just gives me errors), so here is a screenshot of what it looks like expanded.
.panel {
background-color: #F9F9F9;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family:arial;
}
.panel>h3 {
font-size:14px;
background-color:#820D1A;
color:#ededed;
border-bottom:1px solid #000;
text-align:left;
padding:4px;
padding-left:20px;
margin:0px;
border-radius: 21px 21px 0px 0px;
}
.panel>div {
padding:4px;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display:none">(PARAM2)</div>
</div>
.panel {
background-color: #820D1A;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family: arial;
}
.panel>h3 {
font-size:14px;
color:#ededed;
text-align:left;
padding-left:20px;
margin:5px;
}
.panel>div {
padding:4px;
background-color: #FFF;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display: none">(PARAM2)</div>
</div>
Does this look closer to what you are trying to achieve? There were two padding rules on the h3 and I was wondering why you have a background on there as well? Would this not work with your Javascript?
Eh, after messing around I came to the answer that no, it isn't possible. I just resolved to decrease the top border radii by 5 pixels (making them 17px) so that it'd look normal open or closed.
Thank you to everyone who put forth some help, though~
I'm trying to achieve this in CSS:
I would like the green line to always be the width of the text (no fixed width). I have a constraint, the tex is contained in an H3 tag with no ability to add a span tag inside it.
you could maybe try this aproach also:
<div class="container">
<div class="line"></div>
<h3>RECENT EPISODES</h3>
</div>
.container {
width:100%;
position:relative;
}
h3 {
display:inline-block;
border-bottom:1px solid green;
padding-bottom:10px;
margin:0;
position:relative;
}
.line {
height:1px;
background-color:#ededed;
width:100%;
position:absolute;
bottom:0;
}
http://jsfiddle.net/az6pr1mz/
The grey line needs to go on a block level tag while the green needs to go on an inline tag. This means that you need two nested tags for it to work and that you must either add a span inside the h3 or a div surrounding it. An h3 can always be made inline if needed.
A slightly different approach would be to add the secondary element outside the h3 without surrounding it and position that so it lies directly under the h3.
In any case, you will need a minimum of two elements for the borders to cling to.
Update:
I missed that you don't need span inside the h3. I added a workaround. I am not sure whether this is the only solution. But I think it can be improved though. In the below code, I am using css content property to hide the border of the container.
NOTE: Use as many dots . as you can use to make it work on all resolutions.
CSS
.container {
border-bottom: 1px solid red;
padding-bottom: 10px;
position: relative;
max-width: 100%;
word-break: break-all;
}
.container:after {
content:"....................................................................................................................";
color: transparent;
border-bottom: 1px solid green;
padding-bottom: 10px;
position: absolute;
bottom: -1px;
}
Working Fiddle
For example this code: (is clearly and not uses absolute positions)
HTML:
<h3><span>Recent episodes</span></h3>
CSS:
h3{
text-transform:uppercase;
border-bottom:1px solid #ccc;
}
h3 span{
display:inline-block;
border-bottom:1px solid #080;
margin:0 0 -1px 0;
}
http://jsfiddle.net/tp0nnapu
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%;
}
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.
Setting line won't appear on top of the background color,what seems to be the problem?Thank you.I have this code
<div class="setting-wrapper">
<div class="setting-line"></div
</div>
css
.setting-wrapper{
background-color:#E2E9E9;
position: absolute;
left:450px;
top:20px;
border:1px solid #dedede;
display:block;
width:500px;
height:400px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
border-radius:5px;
}
.setting-line{
margin-top:5px;
margin-bottom:5px;
width:500px;
border-top:solid #e6e6e6 1px;
}
If <div class="setting-line"></div isn't a copy/paste typo, then theres a missing bracket at the end of the closing DIV.
But maybe it's only hard to see a difference between #E2E9E9 and #e6e6e6 (depending on the systems color-depth and/or screen capabilities).