I want to have css clip-path like the below image
can someone help me
img {
clip-path: polygon(53% 0%, 100% 1%, 100% 50%, 100% 100%, 55% 100%, 42% 65%, 0% 52%, 44% 36%);
border-radius:0 100% 100% 0
}
<img src="http://lorempixel.com/400/400/">
mask can easily do this. It would be tricky to have curve with clip-path
img {
width:50%;
border-radius:50%;
-webkit-mask:
radial-gradient(circle at top left,transparent 45%,#fff 45.5%) top,
radial-gradient(circle at bottom left,transparent 45%,#fff 45.5%) bottom;
-webkit-mask-size:100% 50%;
-webkit-mask-repeat:no-repeat;
}
<img src="https://picsum.photos/id/1012/800/800">
Another syntax:
img {
width:50%;
border-radius:50%;
-webkit-mask:
radial-gradient(51% 51% at 0 0 ,transparent 99%,#fff),
radial-gradient(51% 51% at 0 100%,transparent 99%,#fff);
-webkit-mask-composite: destination-in;
mask-composite:intersect;
}
<img src="https://picsum.photos/id/1012/800/800">
Related
I'm trying to replicate the following gradient in CSS:
The best I've managed to do is:
background:
radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
background-blend-mode:screen;
which isn't that close:
Is it possible to get even closer to the gradient in the image? (It doesn't have to be CSS, Javascript is also valid, or even an external library. But pure CSS is preferred.)
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background:
radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
background-blend-mode:screen;
}
You were really close, start anticlockwise from the left bottom color,
and don't use mix-blend mode- to get rid of artifacts.
body {
font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
min-height: 150vh;
padding: 2em;
margin: 0;
color: hsla(0, 0%, 100%, 0.85);
background-color: #170d24;
background-image:
radial-gradient(ellipse at 10% 90%, #3c2d83 0%, transparent 55%),
radial-gradient(ellipse at 90% 90%, #c33c65 0%, transparent 55%),
radial-gradient(ellipse at 90% 10%, #4a74dc 0%, transparent 55%),
radial-gradient(ellipse at 10% 10%, #35244f 0%, transparent 55%);
}
<b>ETHEREUM</b> 2.0
<h1>Your Gateway<br>into Blockchain</h1>
<p>Scroll down... and to the moon!</p>
Thanks to Temani Afif's suggestion I came up with the following. Still not exact, but way closer than before. If anyone wants to improve on this, it's very much welcome.
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background:linear-gradient(to right, #35234b 0% 10%,#2975bf 60% 70%,#3d54b1 80% 100%);
}
body::before{
content:""; display:block; height:100%;
background:linear-gradient(to right, #362d6f,#9f3c54);
-webkit-mask:linear-gradient(to bottom,transparent, #fff);
mask:linear-gradient(to bottom,transparent, #fff);
}
div{
height: 500px;
width: 900px;
background-image: linear-gradient(to bottom right,green 33% 66%,yellow 66% 100%,black 111% 222%,yellow 0% 5%,blue 0% 10%);
}
<div></div>
here's how its supposed to be:
Do it with multiple background and it will be easier to handle:
.box {
width:300px;
height:200px;
background:
linear-gradient(to bottom right,#21b539 calc(50% - 40px),#f5cf22 0 calc(50% - 30px),#0000 0),
linear-gradient(to top left ,#00a6e0 calc(50% - 40px),#f5cf22 0 calc(50% - 30px),#0000 0)
#000
}
<div class="box">
</div>
try this background: linear-gradient( to bottom right, green 33% 40%, yellow 40% 45%, black 45% 55%, yellow 55% 60%, blue 60% 100% );
Also add a height and width to your div
You have to do something like this:
background-image: linear-gradient(to bottom right,green 35%,yellow 35% 40%, black 40% 60%, yellow 60% 65%, dodgerblue 65%);
Remember the gradient is in the direction top left to bottom right. And a percentage more than 100 don't make any sense.
div {
width: 900px;
height: 500px;
background-image: linear-gradient(to bottom right,green 35%,yellow 35% 40%, black 40% 60%, yellow 60% 65%, dodgerblue 65%);
}
<div>
</div>
I'm trying to create a pyramid. I figured I'd use the CSS clip-path for that. I meant to do a triangle (which I managed to do) and several trapezoids beneath it (even the first one failed).
.container {
min-width: 50%;
max-width: 50%;
}
.triangle {
background-color: yellow;
clip-path: polygon(90% 100%, 50% 0%, 10% 100%);
}
.trapeze {
background-color: blue;
clip-path: polygon(0% 10%, 0% 90%, 0% 100%, 100% 100%);
}
div {
min-height: 200px;
max-height: 200px;
border-color: black;
border-style: solid;
}
<div class="container">
<div class="triangle"></div>
</div>
<div class="container">
<dic class="trapeze"> </dic>
</div>
Finally, here's the result :
I'm not working with any framework and I am using Firefox 67
Use clip-path once then rely on gradient to simulate the different shapes:
.pyramid {
width:200px;
height:200px;
-webkit-clip-path:polygon(0 100%,100% 100%, 50% 0);
clip-path:polygon(0 100%,100% 100%, 50% 0);
background:
linear-gradient(to bottom,
yellow 0 20%,
red 20% 50%,
blue 50% 100%);
}
<div class="pyramid">
</div>
Looking for the code to make this particular shape with CSS..
Any help much appreciated!
You can do it with some rotation and perspective:
.box {
width: 150px;
height: 120px;
background: #f540a8;
margin: 20px;
transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}
<div class="box">
</div>
Or using SVG:
<svg viewBox="0 0 200 200" width=200>
<polygon points="20,0 150,20 170,130 0,150" fill="#f540a8" />
</svg>
And also using gradient (but without transparency):
.box {
width: 150px;
height: 120px;
background:
linear-gradient(to top right, transparent 46%,#fff 50%) right/10px 100%,
linear-gradient(to top right, transparent 46%,#fff 50%) top/100% 10px,
linear-gradient(to bottom right, transparent 46%,#fff 50%) bottom/100% 10px,
linear-gradient(to top left, transparent 46%,#fff 50%) left/10px 100%,
#f540a8;
background-repeat:no-repeat;
margin: 20px;
}
<div class="box">
</div>
You can use clip-path.
The clip-path CSS property creates a clipping region that defines
what part of an element should be displayed. More specifically, those
portions that are inside the region are shown, while those outside are
hidden.
Try this code snippet.
div{
width: 150px;
height: 150px;
-webkit-clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
background: pink;
}
<div></div>
you can use:
clip-path: polygon(30px 0 , 250px 0, 200px 300px, 0 0);
Please see the example here: https://codepen.io/shakogele/pen/ZMZGGK
Hi,
I wonder whether it's possible to use more than one mask on the same element, just like this:
clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%);
With this I would be able to show only certain areas of the element that are separated from each other.
Thank you.
This is possible if you use clip-path with an SVG-defined <clipPath>
.clip-svg {
clip-path: url(#myClip);
}
<img class="clip-svg" src="https://picsum.photos/id/1015/600/400">
<svg width="0" height="0">
<defs>
<clipPath id="myClip">
<polygon points="400,50 400,320, 140,300"/>
<polygon points="450,10 500,200 600,100" />
<polygon points="150,10 100,200 300,100" />
</clipPath>
</defs>
</svg>
Confirmed working in Chrome 60, Firefox 55, Edge 85. Unfortunately doesn't work in IE.
Full browser support information here.
You can also use CSS to make one polygon which goes in and out of element bounds . See:
https://24ways.org/2018/clip-paths-know-no-bounds/
https://codepen.io/danwilson/pen/zMgrgb
div {
width: 80vmin;
height: 80vmin;
background: hsl(181, 90%, 52%);
clip-path: polygon(30px 20px, 40px 200px, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
<div></div>
You can use multiple mask. But you can't use multiple clip-path. You can use multiple masks with clip-path.
you can use mask property with clip-path to make multiple masks.
like this example.
#parent {
display: flex;
justify-content: center;
align-items :center;
height: 100vh;
width: 100vh;
background: linear-gradient(90deg, black 50%, yellow 50%);
}
.multiple_mask{
height: 200px;
width: 200px;
background: red;
clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%, 50% 50%);
-webkit-mask-image: linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(180deg, black, transparent);
mask-image: linear-gradient(45deg, black 50%, transparent 70%);
}
<div id="parent">
<div class="multiple_mask"></div>
</div>
Hope you understand
To use clip path for multiple clips you need to think of it like an etch-a-sketch. You have to complete the object and follow that line to the next object. Then come back to the previous object before moving to the next one.
img {
clip-path: polygon(14% 12%, 8% 0%, 8% 7%, 14% 12%, 87% 96.4%, 92% 96.4%, 97% 92.3%, 87% 96.4%, 14% 12%, 97% 15%, 99% 13%, 99% 0, 97% 15%, 14% 12% );
}
<img class="clip-svg" src="https://picsum.photos/id/1015/600/400"/>