This question already has answers here:
How can I make a div with irregular shapes with css3 and html5?
(3 answers)
Closed 1 year ago.
I want to know if it's possible to create this type of div shape with CSS3.
I'm aware you can do things such as this using border's, but is there anyway to get the borders like in the image (spanning he entire top and bottom of the div) - and for bonus points, for it to do it responsively (% widths?)
.cornered {
width: 160px;
height: 0px;
border-bottom: 40px solid red;
border-right: 40px solid white;
}
Any links, fiddles, advice would be appreciated.
As mentioned in my comment, I have created a skewed triangle (if you remove the padding CSS you will see), and then added padding so that you can't see the tip of the triangle
.cornered {
width: 160px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 280px solid blue;
padding:60px;
}
Fiddle
You could do this
css
.irregular-shape {
border-left: 1500px solid black;
padding: 50px;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
}
markup
<div class="irregular-shape"></div>
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 3 years ago.
I can create a tirangle using CSS trick with border, e.g:
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
<div class="arrow-down"></div>
(from https://css-tricks.com/snippets/css/css-triangle/)
But, as you can see, it always has an even side length. It happens because it consists of two border sides - left and right. If I make one side shorter than other - it doesn't solve the problem, I only get not a equilateral triangle. If I have a triangle with odd side in design picture, I can use this method.
I think, transform could help, but I'm not sure, it's a good and strict enough method.
Is there any other solutions?
I would stretch the triangle using transform by increasing the Y-scale
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
transform: scaleY(1.66);
}
<div class="arrow-down"></div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 6 years ago.
I'm trying to "cut" a div diagonally after some space. It's very difficult to explain. It should look like this:
As you cann see, there is a blue parent div in the back with a white child div inside. The white div will be the same width as the parent div, but it will be "cutted" diagonally after some pixels (e.g. after 100px). I never did something like this, but I thought it could maybe done in CSS3 using transition or rotation or something like this (I don't know, I'm not familiar with CSS3).
I searched for diagonal divs but I only got results like this. Unfortunately I know nothing to do with it. Is this even possible? Can you please give me some hints?
Use border colors to display a diagonally cut div.
Combine it with ::after to use only one div.
.background {
background-color: #5555AA;
padding-top: 15px;
}
.content {
position: relative;
background-color: white;
height: 30px;
line-height: 30px;
padding: 0 100px 0 200px;
display:inline-block;
}
.content::after {
position: absolute;
right: -50px;
content: "";
border-bottom: 25px solid white;
border-left: 25px solid white;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
}
<div class="background">
<div class="content">KONTAKT</div>
</div>
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>
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 9 years ago.
I understand that
border-top: 50px solid transparent;
means the top border will be 50px in thickness, will be solid and will be have no colour.
I also understanding that
border-right: 100px solid red;
means the right border will be 100px thick will be solid and will be red.
But I don't understand how...
#triangle-left
{ width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;}
can make a triangle pointing to the left?
And help understanding would be appreciated.
CSS borders actually have diagonal edges.
Illustration:
\-------/
| |
| |
| |
/-------\
So border-right actually looks like this:
/
|
|
|
\
With height:0px, border-right will also have no height thus it will look like this:
/
\
Now if you use the following css:
#triangle-left{
width: 0;
height: 0;
border-top: 50px solid transparent; /* this will fill the top gap */
border-right: 100px solid red; /* this will be the red triangle */
border-bottom: 50px solid transparent; /* this will fill the bottom gap */
}
You'll get:
A triangle pointing left.
I try to transform my div container like the following picture.
Left is a normal div container painted black. On the right is the container i want to have.
Do you know how to solve this in css3 ? i read something about the "Polygon" attribute in css3, but i also heard that this attribut was removed.
edit: when content is in the box it would be screchted - the box is like "falling in the back".
I found an article at css-tricks.com regarding this a while back. This may work:
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
#trapezoid {
border-bottom: 100px solid black;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px; }
Check here for more shapes and tricks