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>
Related
Following Situation:
I try to make a Triangle, stick to the left side of my Website
.right_5 {
margin-top: 0px;
border-top: 350px solid transparent;
border-bottom: 380px solid transparent;
border-left: 350px solid black;
z-index: 2;
}
<div class="right_5"></div>
And this is the Code, BUT
How do I Make it 100% of the left side? so that the top of the triangle points to the middle of the website?
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 6 years ago.
I have seen several examples of "CSS arrows" - basically, an arrow/triangle, done in pure CSS. Examples here:
https://css-tricks.com/snippets/css/css-triangle/
http://cssarrowplease.com/
http://apps.eky.hk/css-triangle-generator/
...and so on.
However, no matter how much I look into them, I have no idea how does it actually work and why is an arrow generated.
Take this small example, adapted from the first link:
.arrow-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
}
<div class="arrow-up"></div>
Why does transparent left and right border produce arrow up? What is going on?
How do you draw a 50px border around a 0x0 square?
By making a 100x100 square.
#########
#########
#########
#########
#########
But, how do you control all four edges independently?
By cutting the square into 4 triangles. Each triangle is one complete segment of border, but because the border is 50px thick, it is actually composed of four different wedges of solid border:
#########
# ##### #
### # ###
#### ####
### # ###
# ##### #
#########
Now, make the top, left and right triangles transparent and you're left with just the bottom border, which forms and upwards-pointing triangle.
#
#####
#########
You're left with a triangle pointing upwards, in the color of the bottom border.
Here's a demonstration using a progressively larger and larger border width:
div {
margin: 10px;
}
#one {
width: 90px;
height: 90px;
border-top: 5px solid blue;
border-left: 5px solid red;
border-right: 5px solid green;
border-bottom: 5px solid black;
}
#two {
width: 50px;
height: 50px;
border-top: 25px solid blue;
border-left: 25px solid red;
border-right: 25px solid green;
border-bottom: 25px solid black;
}
#three {
width: 0;
height: 0;
border-top: 50px solid blue;
border-left: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid black;
}
#four {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
}
<p>First, lets make a box, 100x100px. We'll use a 5px border, and a 90x90px content area.</p>
<div id="one"></div>
<p>Next, lets make the box smaller, but make the borders bigger. You should start to see how the four borders are controlled independly. We'll use a 50x50px box and a 25px border.</p>
<div id="two"></div>
<p>Now we'll shrink the box down to 0x0, with a 50px border on all edges. Now, there is no box, only border. It's now quite obvious that, as the border grows and the content shrinks, the border is cut along the corners at a 45 degree angle.</p>
<div id="three"></div>
<p>Finally, if we make the top, left and right borders transparent, ony the lower triangle making up the bottom border is left.</p>
<div id="four"></div>
I have 2 div's here,using css pseudo elements am drawing shapes.
both are having same proprties except position property of the pseudo elements , how can the shapes are differing in both the cases.
#withpos:after{
border-top: 100px solid red;
border-left: 100px solid red;
content: "";
position: absolute;
border-right: 100px solid green;
border-bottom: 100px solid green;
width: 0px;
}
#withoutpos:after{
border-top: 100px solid red;
border-left: 100px solid red;
content: "";
border-right: 100px solid green;
border-bottom: 100px solid green;
width: 0px;
}
#withoutpos{
margin-left:250px;
margin-top:100px;
}|
<div id="withpos"></div>
<div id="withoutpos"></div>
That additional form in the #withoutpos square is due an empty line of text, brought by content:"".
This is visible when inspecting the element:
The after element isn't absolutely positioned so it's push by the flow (this "square" is taller than the other).
As #talya-s says, font-size: 0 will fix it, and strangely height: 0 don't, except if you actually put some text (which makes no sense, of course).
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'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.