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>
Related
This question already has answers here:
CSS Property Border-Color Not Working
(6 answers)
Closed last year.
I'm trying to put a border around a header, nothing seems to be working... apologies, I'm pretty new to all of this, so is there another way?
header {
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 852px;
height: 179px;
border: 10px #FFFFFF;
border-radius: 6px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Vincent_van_Gogh_-_Self-portrait_with_grey_felt_hat_-_Google_Art_Project.jpg/250px-Vincent_van_Gogh_-_Self-portrait_with_grey_felt_hat_-_Google_Art_Project.jpg");
}
<header>
<img src="https://www.brandbucket.com/sites/default/files/logo_uploads/284255/large_titletext.png" alt="ninenonzeg">
</header>
Change the border color then try to do that. I think that your background color and border color are similar. And also give the style of the border.
border: 10px solid #FFFFFF;
or
border-style:solid;
Add solid attribute to border in css.
do
border: 10px solid #FFFFFF;
make sure you need a #FFF (white) border
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:
Half circle with CSS (border, outline only)
(6 answers)
Closed 4 years ago.
Can you provide me a suggestion on how to cut this circle into half? Also float them on between left and right.
.hello {
background-color: red;
width: 200px;
height: 180px;
border: transparent;
border-radius: 50%;
opacity: 0.50;
}
<div class="hello"></div>
This can be done purely on CSS making use of borders. Keep note that height has to be half of the width to give the half circle.
border-top-left or right-radius is the thing that adds the curve. So adding that extra +10 to it makes up for the space the border(which is set to 10px) creates. That way you get a perfect semi circle.
Try this:
#hello {
width: 200px;
height: 100px;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 10px solid red;
border-bottom: 0;
float: right; /* Change this to left to float it to left */
}
<div id="hello"></div>
I have made it float right. Just change the value to left to change to float: left;
Hope this helps!
you should first make 2x1 Rectangle, then with border-radius make it round, but in just to side. see below code:
.half-circle {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
border: 1px solid red;
}
To make an awesome CSS shapes you can see this cheatsheet page.
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>
I have a div in HTML with some text written in it.The div is created by setting its X, Y coordinates and height and width.
I want to draw a triangle Superimposing that div so that my content is not lost.
I cannot change the X,Y coordinates as my other div's positioning is based on this div.
Generating a Triangle using multiple div's approach also does not seem feasible as I am not sure in which div I will write my text then......
Can somebody suggest an idea on how I can do this..?
You can do this with an image, but a more interesting way is to mess around with the borders of a div to make a triangle.
.triangle {
font-size: 0px;
line-height: 0%;
width: 0px;
border-bottom: 20px solid #000;
border-left: 10px solid #000;
border-right: 10px solid #000;
}
How this is works explained much more clearly here
Use this code for developing triangle:
CSS
.triangle {
width:0;
border-bottom:120px solid red;
border-left:60px solid white;
border-right:60px solid white;
}
HTML
<div class="triangle"></div>