I've been working on a website and as I'm trying to use the clip-path property in a div in order to create an arrow shape which I intend for it to be a right triangle, I'm getting this result by now:
.aboutus {
width: 100%;
height: 50vh;
position: relative;
background: #589AB8;
clip-path: polygon(0% 100%, 40% 100%, 50% 50%, 60% 100%, 100% 100%, 100% 0%, 0% 0%);
}
<div id="aboutus" class="aboutus">
</div>
I want to know if there is a way in which I can obtain the proportion between vh and vw (vh/vw) to get to mantain the proportion of the triangle sides for any viewport, without it deformating when I change the viewport size.
Or if you have any suggestions for it to mantain the shape, I will welcome it.
Thanks
The calc() function mgiht help
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
a triangle always of 20px/30px
.aboutus {
width: 100%;
height: 50vh;
position: relative;
background: #589AB8;
clip-path: polygon(0% 100%, calc(50% - 20px) 100%, 50% calc(100% - 20px ), calc(50% + 20px) 100%, 100% 100%, 100% 0%, 0% 0%);
}
<div id="aboutus" class="aboutus">
</div>
a triangle set from vmin
.aboutus {
width: 100%;
height: 50vh;
position: relative;
background: #589AB8;
clip-path: polygon(0% 100%, calc(50% - 10vmin) 100%, 50% calc(100% - 10vmin ), calc(50% + 10vmin) 100%, 100% 100%, 100% 0%, 0% 0%);
}
<div id="aboutus" class="aboutus">
</div>
a triangle set from vmax
.aboutus {
width: 100%;
height: 50vh;
position: relative;
background: #589AB8;
clip-path: polygon(0% 100%, calc(50% - 5vmax) 100%, 50% calc(100% - 5vmax), calc(50% + 5vmax) 100%, 100% 100%, 100% 0%, 0% 0%);
}
<div id="aboutus" class="aboutus">
</div>
a mix of vh/vw ?, maybe what you try to do ?
.aboutus {
width: 100%;
height: 50vh;
position: relative;
background: #589AB8;
clip-path: polygon(0% 100%, calc(50% - (5vh + 2.5vw)) 100%, 50% calc(100% - (5vh + 2.5vw)), calc(50% + (5vh + 2.5vw)) 100%, 100% 100%, 100% 0%, 0% 0%);
}
<div id="aboutus" class="aboutus">
</div>
In addition to the answer of #G-Cyrillus that I recommend you can consider the use of mask and some CSS variables to easily control the shape and maintain the proportion.
.aboutus {
--angle:45deg;
--d:10vh;
height: 50vh;
background: #589AB8;
margin:5px;
--g:transparent var(--d),#fff calc(var(--d) + 1px);
-webkit-mask:
linear-gradient( var(--angle) ,var(--g)) right,
linear-gradient(calc(-1*var(--angle)),var(--g)) left ;
-webkit-mask-size:50% 100%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient( var(--angle) ,var(--g)) right,
linear-gradient(calc(-1*var(--angle)),var(--g)) left ;
mask-size:50% 100%;
mask-repeat:no-repeat;
}
<div class="aboutus"></div>
<div class="aboutus" style="--angle:60deg;"></div>
<div class="aboutus" style="--angle:30deg;--d:30px;"></div>
Related
I am working on a project where I need to use a Polygon shaped container. I managed to make it work on chrome with -webkit-clip-path. I know that i have to use a other class name to make it work on Firefox. I tried moz-clip-pathbut that didn't seem to work. I will leave a code sample so that you can try it out yourself.
I am thankful for any suggestions
display: block;
margin: 0 auto;
position: relative;
width: 352px;
height: 304px; /* width * 0.866 */
background: #333333;
box-sizing: border-box;
-webkit-clip-path: polygon(
0% 50%,
25% 0%,
75% 0%,
100% 50%,
75% 100%,
25% 100%
);
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
Currently using this CSS for a bottom slant going up from left to right:
clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 3vw), 0 100% );
It works very well for a responsive solution but having a hard time figuring out how to do this for a responsive solution for a slant at the top of the div going down from left to right.
I tried this:
clip-path: polygon( 0 0, 100% calc(100% - 29vw), 100% 100%, 0 100% );
Thank you!
You can adjust like below. You make the second point to start lower by 3vw and you put back the other one to 100%
.box {
height: 100px;
background: red;
clip-path: polygon( 0 0, 100% 3vw, 100% 100%, 0 100%);
/* (0,0) ----------------- (100%,0)
| |<---------(100%,3vw)
| |
| |
| |
(0,100%) ----------------- (100%,100%)
}
<div class="box">
</div>
And like this if you want from right to left:
.box {
height: 100px;
background: red;
clip-path: polygon( 0 3vw, 100% 0, 100% 100%, 0 100%);
}
<div class="box">
</div>
On the sides:
.box {
height: 100px;
background: red;
clip-path: polygon( 0 0, calc(100% - 3vw) 0, 100% 100%, 0 100%);
}
<div class="box">
</div>
If you want a more supported way, you can consider multiple background like below:
.box {
height: 100px;
margin:5px;
padding-top:3vw;
background:
/*a triangle shape on the padding-top area*/
linear-gradient(to bottom var(--d,left),transparent 48%,red 50%) top/100% 3.1vw no-repeat,
/*color the content and not the padding-top*/
linear-gradient(red,red) content-box;
}
<div class="box">
</div>
<div class="box" style="--d:right">
</div>
I want to cut small element in an image. So, I am using skew to do this.
But when to skew, the image seems broken, I want to keep image is not rotation.
My code like this:
.image-skew{
/* transform: skewX(-25deg); */
position: absolute;
width: 100%;
height: auto;
}
.img-skew-invest {
transform: skewX(-25deg);
display: flex;
}
<div class="image-skew">
<img class="img-skew-invest" src="http://thebusiness.vn/uploads/business360/chuyenkinhdoanh/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam.png" alt="" style="width: 100%; height: auto"/>
</div>
Same image.
I cut an element of the picture with skew, but it should be a not rotation.
clip-path will match your requirement:
.image-skew {
-webkit-clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%);
clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%);
}
Try it yourself: https://jsfiddle.net/hgzsr5f5/1/ or try clip-path generator: http://bennettfeely.com/clippy/
Is there a css3 method that would allow you to diagonally corner crop an image?
I have a white/grey box variant in the works -- for solid colors -
.item:before{
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 40px solid #dddddd;
border-left: 40px solid #ffffff;
width: 0;
}
.item:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
border-top: 40px solid #ffffff;
border-left: 40px solid #dddddd;
width: 0;
}
one of the big issues now though
is the polygon is using %'s -- so if the divs are different sizes -- the corners look different
This isn't quite the right dimensions, and you'll have to adjust based on your image height/width, but here's a little example that could work:
.clipit {
max-width:100%;
height:auto;
-webkit-clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));
clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));
}
<img class="clipit" src="http://images.freeimages.com/images/previews/865/stairs-of-light-1532779.jpg" />
This page could be really useful to you: http://bennettfeely.com/clippy/
Basically: clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));:
Point 1 at 0% (width), 0% (height)
Point 2 at 100% - 30px (width), 0% (height)
Point 3 at 100% (width), 0% + 30px (height)
etc.
Take a look at this site http://bennettfeely.com/clippy/
You can design your own clip path angles. (Designer does not appear to work in Firefox)
-webkit-clip-path: polygon(0 10%, 10% 0, 100% 0%, 100% 90%, 90% 100%, 0% 100%);
clip-path: polygon(0 10%, 10% 0, 100% 0%, 100% 90%, 90% 100%, 0% 100%);
The 10% is the top left corner, the 90% is the bottom right.
example image
I think I figured it out. you would have to use clip-path:
.item{
-webkit-clip-path: polygon(75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%, 0 0);
clip-path: polygon(75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%, 0 0);
}
here's an example with a image and div with a background:
http://codepen.io/nilestanner/pen/vXOZmG
You cant create your own polygons here: http://bennettfeely.com/clippy/
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.