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%);
}
Related
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>
These are the Divs
I tried to use :
`clip-path:polygon()`
But the shapes have more than 12 Edges, I promise that I've been trying to figure it out for a long period of time and I'm Stuck ..
You can use SVG
https://www.w3schools.com/graphics/svg_polygon.asp
I would recommend using SVG's. They are sharp and also endless scale able because they are vector based.
You can use create polygon using this link: http://bennettfeely.com/clippy/
Create simple triangle and try to understand the % values following the colour dots and percentage and then you can change % values later on to create any polygon.
div {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
/* Center the demo */
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
}
<div></div>
I'm trying to re-design a website homepage.
How can I split the full screen background image currently being used into 3 sections, with a gap between each with the image only being shown within the Rhomboid shape?
I've looked around and have found the CSS + HTML to create the Rhomboid with the image inside however it's the whole image and only one of these Rhomboid shapes.
.polygon-each {
padding: 10px;
text-align: center;
}
.polygon-each-img-wrap img {
margin-bottom: 10px;
}
.polygon-each img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
img {
max-width: 100%;
height: auto;
}
.polygon-clip-rhomboid {
-webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
-webkit-clip-path: url("#polygon-clip-rhomboid");
clip-path: url("#polygon-clip-rhomboid");
}
<div class="polygon-each">
<div class="polygon-each-img-wrap">
<img src="/img/rules-bgrnd.png" alt="demo-clip-rhomboid" class="polygon-clip-rhomboid">
</div>
<svg class="clip-svg">
<defs>
<clipPath id="polygon-clip-rhomboid" clipPathUnits="objectBoundingBox">
<polygon points="0 1, 0.3 0, 1 0, 0.7 1" />
</clipPath>
</defs>
</svg>
</div>
A view of what is currently shown can be seen here
One way you could do this is just by utilizing a more complex clipping path that has three rhomboids in it. There are some tools that help you "draw" the path you want and generate the CSS for you, http://bennettfeely.com/clippy/ is one I was able to find, but there seem to be more as well.
Essentially, you want your path to have points positioned in a way where it looks like you're creating three different shapes, even though it's all one clip.
.polygon-each {
padding: 10px;
text-align: center;
}
.polygon-each-img-wrap img {
margin-bottom: 10px;
width:100%;
-webkit-clip-path: polygon(0% 100%, 15% 0, 33% 0%, 18% 100%, 32% 100%, 46% 0, 66% 0, 52% 100%, 68% 100%, 80% 0%, 100% 0%, 91% 100%);
clip-path: polygon(0% 100%, 15% 0, 33% 0%, 18% 100%, 32% 100%, 46% 0, 66% 0, 52% 100%, 68% 100%, 80% 0%, 100% 0%, 91% 100%);
}
.polygon-each img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
img {
max-width: 100%;
height: auto;
}
https://jsfiddle.net/bjc89nkv/
There's a quick and messy demo of what I was able to "draw" to create such an effect.
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.