This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 2 years ago.
I would like to make my div have a pointy angle but I am not sure of what is the best way to do it.
.top-div {
width: 310px;
height: 25px;
background-color: #A52432;
}
<div class="top-div"></div>
For this kind of effect you could use CSS and make a clip-path like this:
.top-div {
width: 310px;
height: 25px;
background-color: #A52432;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
}
<div class="top-div"></div>
You can do it with a simple linear-gradient() which has greater support than clip-path:
.top-div {
width: 310px;
height: 25px;
background: linear-gradient(45deg, transparent 10%, #A52432 10.01%);
}
<div class="top-div"></div>
A div is always a rectangle. I would suggest to place a svg with <polgon> on the divs position (see Polygons).
Related
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 1 year ago.
Basically, I have this CSS code that uses a linear gradient to cut a 45-degree chunk out of the corner of my div. However, I want to apply a gradient to the top of the div with the transparent part still there.
What I want
What I have
This is the code I have in CSS
.sectionlabel {
position: absolute;
width: 100%;
color: white;
height: 35px;
top: -35px;
border-top-left-radius: 6px;
background: linear-gradient(225deg, transparent 10px, #676767 0);
}
I'm not completely sure what to add to this to overlay a gradient onto the div.
All help is appreciated!
Thanks,
GraysonDaMighty
Consider using clip-path to cut the edge of an angle.
div {
height: 35px;
width: 200px;
-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0%, 0% 0%);
background-image: linear-gradient(0deg, black, gray 80%);
}
<div></div>
i'm trying to apply a gradient to a skewed div but the gradient starts where the skew starts and it doesn't apply the gradient i'm looking for no matter what angle i use.
This is the gradient i'm trying to replicate
but I get a very different result...the colors are off and it's too green on the right side of mine. You can notice that on the image above, the gradient starts at the little wedge at the bottom but mine starts on the entire bottom part.
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);;
transform: skewY(-12deg);
transform-origin: 0;
}
<div class="main">
<div class="skew-div">
</div>
</div>
is this possible without just placing the image as a background?
Use clip-path
.main {
height: 80vh;
background-color: white;
position:relative;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>
You can use clip-path property
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
;
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>
Instead of using transform: skewY() you may use clip-path property. transform sometimes creates some sudden confusing problems. That's why you should sometimes escape using that property. Else use it using proper Browser Vendor Prefixes.
If you feel any difficulty configuring clip-path property then you may use this 3rd party website for clip-path value generation =>
https://bennettfeely.com/clippy/
I want to create a triangle which looks like red triangle in below image:
So, I tried my luck with css as follows:
HTML:
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
CSS:
.div-1 {
position: absolute;
bottom: 0; left: 0;
border-bottom: 385px solid #222;
border-right: 175px solid transparent;
width: 0;
z-index: 5;
pointer-events:none;
}
.div-2 {
position: absolute;
bottom: 0; left: 45px;
border-bottom: 285px solid #ED3237;
border-right: 130px solid transparent;
width: 0;
z-index: 5;
}
.div-3 {
position: absolute;
bottom: 0; left: 45px;
border-bottom: 286px solid #222;
border-right: 105px solid transparent;
width: 0;
z-index: 5;
pointer-events:none;
}
And I got it. Here is the JSFiddle
Now, I want to change the triangle's color to blue when I hover over it.
So, I tried this CSS:
.div-2:hover{
border-bottom: 285px solid blue;
}
At first sight it looks like it is working fine. But we can notice the problem if we take a look at it closely.
Whenever mouse pointer is on transparent area of .div-2, then also color of triangle is changed. I don't want that. I only want to change the color of triangle to blue when cursor is hovered over visible(red) part of .div-2.
So, I again searched on google. Which explained me that I should use rotate transform instead of borders of div.
But I can't find a good tutorial on creating right angled triangles of different width and height as used above. So, I asked this question. Here is the question: How to create a triangle as shown in above image using rotate transform, css3 property.
Update:
SVG is really easy. But I want it done with css because I also intend to hide the bottom part of carousel as shown here:
With all due respect, your request doesn't make much sense. From where I see it, you should not be asking for do this using that (or the other) technique.
Code is convention.
It all boils down to using some conventions over others, in order to display the result we want in particular browsers. It really does not matter what technique or language one uses, as long as they achieve the result without side-effects on other functionality/behavior.
Getting back to your question, you'll always have trouble trying to control the :hover state of an element while hovering a border but not the other.
You could, of course, add a mask to your element thus limiting pointer-events but, than again, why not use the mask in the first place, for display?
Here's how I'd tackle this layout:
.image-container {
background-color: #222;
position: relative;
}
.image-container img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-clip-path: polygon(0 0, 73% 0, 100% 50%, 100% 100%, 27% 100%);
clip-path: polygon(0 0, 73% 0, 100% 50%, 100% 100%, 27% 100%);
}
l-border,
r-border {
position: absolute;
height: 100%;
width: 100%;
background-color: #600;
top: 0;
transition: background-color .5s cubic-bezier(.5, 0, .3, 1);
}
l-border:hover,
r-border:hover {
background-color: red;
}
l-border {
-webkit-clip-path: polygon(0 0, 24% 100%, 27% 100%);
clip-path: polygon(0 0, 24% 100%, 27% 100%);
}
r-border {
-webkit-clip-path: polygon(73% 0, 100% 50%, 76% 0);
clip-path: polygon(73% 0, 100% 50%, 76% 0);
}
body {
margin: 0;
}
/* changing both borders when hovering image
just showing you it's possible */
.image-container img:hover ~ * {
background-color: #f50;
}
<div class="image-container">
<img src="https://unsplash.it/1200/450" />
<l-border></l-border>
<r-border></r-border>
</div>
Depending on image ratio or even responsiveness, you might prefer px instead of %:
.image-container img {
-webkit-clip-path: polygon(0 0, calc(100% - 150px) 0, 100% 50%, 100% 100%, 150px 100%);
clip-path: polygon(0 0, calc(100% - 150px) 0, 100% 50%, 100% 100%, 150px 100%);
}
l-border {
-webkit-clip-path: polygon(0 0, 130px 100%, 150px 100%);
clip-path: polygon(0 0, 130px 100%, 150px 100%);
}
r-border {
-webkit-clip-path: polygon(calc(100% - 130px) 0, 100% 50%, calc(100% - 150px) 0);
clip-path: polygon(calc(100% - 130px) 0, 100% 50%, calc(100% - 150px) 0);
}
What I personally do is go to Clippy to get a basic shape polygon going fast (close to what I want) and fine-tune it to my needs in browser, applied to the live example until it fits the current bill.
You should note clip-path is not fully supported, currently at 88.42% support. One could say there is nothing "micro" or "soft" about the clip-path property at the moment.
I tried my best https://codepen.io/CrUsH20/pen/owWeNo
You can change stylus preprocessor in settings it'll be shown as pure CSS. You'll need to press down-arrow at middle block and select View compiled CSS.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to create a diagonal background image as seen in the attached image. I can create a diagonal line using linear-gradient however as I have two different angles this didn't work.
Using Linear Gradients:
This can be done using multiple background images and positioning them accordingly. In the snippet below I've used 3 different layers - one for the top angle (a triangle which is transparent for 50% and is colored for the rest), one for the middle which is essentially nothing but a solid colored rectangle, this is created using linear gradients as it is easier to control the dimensions of an image and finally one for the bottom angle (same approach as the top one but this has a different height and so different angle.)
The output is also responsive as you can see by hovering the element in the below snippet. In the 2nd div, I've set different colors for each image so that you can see how it is formed.
div {
height: 300px;
width: 100%;
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightblue, lightblue), linear-gradient(to top right, transparent 50%, lightblue 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
transition: all 1s ease; /* just for demo */
}
/* just for demo */
div {
margin-bottom: 10px;
}
div:hover {
height: 400px;
}
div:nth-of-type(2) {
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightpink, lightpink), linear-gradient(to top right, transparent 50%, lightgreen 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
}
<div></div>
<div></div>
Using SVG: recommended
This is the approach that I generally recommend and is the best. It involves creating the shape using SVG and then placing it absolutely behind the div element.
div {
position: relative;
height: 300px;
width: 100%;
}
svg {
position: absolute;
height: 100%;
width: 100%;
}
polygon {
fill: lightblue;
}
<div>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<polygon points='0,10 300,0 300,100 0,75z' />
</svg>
</div>
Using Clip-path:
Another approach that can be used is to position a pseudo-element behind the main div and then set a clip-path in the required shape to this pseudo-element.
Note: This snippet will currently work only in WebKit powered browsers. Firefox would need the clip-path to be created via SVG element whereas IE doesn't support it all.
div {
position: relative;
height: 300px;
width: 100%;
}
div:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: lightblue;
-webkit-clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
}
<div></div>
CSS Perspective
You can use a CSS Perspective Transform to create the shape you want.
div {
margin-top: 25px;
width: 500px;
height: 150px;
transform: perspective( 800px ) rotateY( -25deg );
background: blue;
}
<div></div>
CSS Tricks Docs
Perspective - CSS | MDN
You can apply perspective to the parent container of the rotated div to give it 3-dimensional depth from the front of the viewport.
N.B. For the difference between transform: perspective(value) and perspective: value, see the CSS Tricks Almanac entry on perspective:
Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children
elements. This is the main difference between the transform: perspective() function and the perspective property. The first
gives element depth while the latter creates a 3D-space shared by all
its transformed children.
After applying a 3-dimensional depth to the parent container using perspective, you can then apply rotateY to the div you want to rotate.
Working Example:
section {
position: relative;
width: 600px;
perspective: 800px;
transform: translateX(-60px);
}
div:nth-of-type(1) {
position: absolute;
top:30px;
left: 0;
width: 100%;
height: 100px;
background-color: rgb(235,250,255);
transform: rotateY(320deg);
}
div:nth-of-type(2) {
position: absolute;
top: 0;
left: 220px;
width: 120px;
height: 140px;
background-color: rgb(103,201,236);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
div:nth-of-type(3) {
position: absolute;
top: 24px;
left: 340px;
width: 120px;
height: 140px;
background-color: rgb(255,255,255);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
<section>
<div></div>
<div></div>
<div></div>
</section>
I'm trying to cut out the top right corner of most of my div elements on my site. These divs are all different sizes. I'm trying to find a responsive way of doing this. I ran into this site here: http://bennettfeely.com/clippy/ which allows you to cut out a custom polygon shape.
Here is what I have so far:
div {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
}
/* Center the demo */
html, body { height: 100%; }
body {
background-image: url('http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg');
display: flex;
justify-content: center;
align-items: center;
}
<div></div>
My question is I'm trying to read these clippings and find out how to make the perfect 45 degree angle cut off the top right corner. As of right now this polygon was created by me freehand. And I'm trying to see what percentages I would need to use to make the perfect 45 degree angle cut from the top right.
With the solution I will be adding the cutoff to most of my divs, buttons, and images.
I found other ways of doing this on Stack Overflow using border-left and right with absolute position, but the problem is I need the div cutoff to be transparent because some of them have background images behind it.
Here is a JS Fiddle that's set up: https://jsfiddle.net/xyvz5z8m/1/
You should be able to do an exact 45 degree clip by using CSS calc, to work out the positions to clip from, instead of the percentages. e.g.
-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
div {
width: 100px;
height: 100px;
background: #1e90ff;
-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
/* Resizing this div just to show that this will remain at 45 degrees */
animation: resize 5s infinite;
}
html, body {
height: 100%;
}
body {
background: #ededed;
display: flex;
justify-content: center;
align-items: center;
}
#keyframes resize {
0% { width: 100px; height: 100px; }
25% { width: 50px; height: 100px; }
50% { width: 50px; height: 50px; }
75% { width: 150px; height: 50px; }
100% { width: 100px; height: 100px; }
}
<div></div>
The key part being that we use pixel sizes for the positioning of the clipped area, and calc(100% - 30px) to get an exact position from the far side of the element, though bare in mind this may have very limited browser support.