I'm trying to make this shape in css:
but am sort of lost how to do so. I have a triangle made right now with this:
var resY = $(window).height;
var resX = $(window).width;
$('#slide1-container').css({'border-bottom-width': resY, 'border-left-width': .4*resX});
because for some reason percentages/vh/vw wasn't working with border-width in css (not sure if it's supported?)
I'm unsure of how to make it from triangle -> the shape I have pictured. Any suggestions?
Thanks for any help! :-)
How is this?
http://jsfiddle.net/xVzMZ/
#shape {
border-bottom: 150px solid black;
border-left: 50px solid transparent;
height: 0;
width: 100px;
}
A right border, like:
#trapezoid {
border-bottom: 2em solid black;
border-left: 1em solid transparent;
border-right: 1.5em solid black;
width: 0;
}
Seems to look right. It’s not hard to adjust.
Related
I am wanting to create inline-block divs in CSS that have diagonal sides by having a top width of lets say 200px and a bottom width of 100px. Is this possible? If so, how? Or what would anyone suggest as a better alternative?
The box model of HTML implies that divs are always rectangles. However you can get a very decent result using some techniques. The simplest one is too use css to tint just the part of your background needed. You set the width to the wider side and then use the border-left right and bottom properties to adjust the shape. For example:
.myDiv {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
You can see it working here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid
The w3school also have a very interesting page with a lot of shapes you can create with css. Check it here: https://www.w3schools.com/howto/howto_css_shapes.asp
Are you looking to create a trapezoid?
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
<div class="trapezoid">
</div>
Soo ive tried this code
.itemselected {
Width: 150px;
height: 150px;
border-bottom: 1px solid #111;
}
But when i use that it loks very weird like theres a border around the Whole thing, i only want the border at the bottom.
.itemselected {
Width: 150px;
height: 150px;
border-bottom: 1px solid #111;
border-top: 0;
border-left: 0;
border-right: 0;
}
That should fix it, i had the same problem before but when i used that code to set the other borders to 0 it worked perfectly :)
Ok, so for the sake of argument i have a box with a grey left and right border with an 8 pixel border bottom with a different colour.
The way borders display is showing the bottom border inside the left and right border. Ive done some research but i cannot find a way that is possible for the bottom border to display under the side borders as apposed to inside them. Sorry if i have not explained this too well please feel free to ask if you need any more information. Please follow the link below to a quick fiddle i have created.
<div class="bg">
<div class="box">
Box
</div>
</div>
.bg {
background-color: #fff;
width: 72%;
float: left;
height: 100%;
padding: 100px;
}
.box {
background-color: #fff;
height: 200px;
width: 200px;
float: left;
margin-left: 100px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 8px solid black;
}
http://jsfiddle.net/L06s4k50/
Thanks in advance people.
I think the best way of going about this is to forgo the border-bottom completely, and instead use a box-shadow property:
.box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 8px black;
}
I have a table with rounded corners on the bottom, created with:
border-bottom-left-radius:pixel;
and same for the right bottom.
When I add:
bottom-border-dotted;
border-bottom-color:white;
the dotted white border appears correctly (rounded), but the table bottom reverts back to a rectangle. I have a solid background color in this table. When I replace" bottom-border-dotted, with border-bottom-solid, with the same white color everything is fine.
I just love the dotted border, especially at Christmas.
I think you have some errors in the CSS. F.e.: bottom-border-dotted; is not valid CSS. You should use border-bottom: 3px dotted black; or border-bottom-style: dotted;.
Try this example (see JSFiddle)
HTML
<div></div>
CSS
div {
display: inline-block;
width: 300px;
height: 300px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: solid 3px black;
background-color: #cccccc;
border-bottom: 3px dotted black;
}
Result
Above code will create something like this:
I have a fixed header on my site that I'm working on. So the content of my page flows under the header and the header stays fixed at the top of the page. I can't use the border-radius function in css to create my rounded corners that I want because the page content background color shows on the outside of my rounded corners. So I have implemented two rounded corner images, one for the left and one for the right. My problem is, the images move a total of 1px when I zoom. No matter how much I zoom, it only moves a total of 1px and for the life of me, I can't seem to figure out the problem. I'm going to post a link to my site and maybe somebody can go through the html and css and try to figure this out. I also put a link to download my VB project to look at in Visual Studio. Any help would be appreciated thanks a lot.
Link to Webpage
http://aspspider.info/speeddemon8406/Default.aspx
Link to download VB project
http://www1.datafilehost.com/d/46288e83
#header {
background-color: #ddd;
height: 125px;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
}
#header-top {
background-color: #fff;
border-left: 1px solid #aaa;
border-radius: 25px 25px 0 0;
border-right: 1px solid #aaa;
border-top: 1px solid #aaa;
height: 85px;
width: 958px;
}
#nav-wrapper {
background-color: #fff;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
width: 958px;
}
#nav {
background-color: Orange;
border-radius: 15px 15px 0 0;
height: 40px;
margin: 0 1px;
width: 956px;
}
#topleftcorner,#toprightcorner,#nav-corner-left,#nav-corner-right{display:none;}
The basic idea is that I put a #ddd color on #header (the page background color). I then use border-radius on #header-top to round the corners. I also apply a white background to #nav-wrapper. Then I just fix up the borders, and remove the unnecessary images.
As for your 1px off problem, it's a rounding error. I removed left:0;right:0 from #header and replaced it with left:50%;margin-left: -480px so that it doesn't happen.