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/
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%);
}
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>
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.
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.
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.