How can I clip image with an outline?
I am using the guide from here.
css:
clip-polygon {
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
border: 10px solid red;
}
HTML:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="clip-polygon">
Result:
It the border/ outline does not follow the clipped shape at all.
Is it achievable?
Also, how can I clip with more curved like pebbles, something like:
Related
I am trying to create a CSS gradiant based vertical progress bar as shown in the figure.
Sample Image
I want to achieve the followings:
It should only have two colors.
The gradient should be a dotted one (similar to dotted border).
I should be able to set the height of each color. For example, if I want the 30% of the height of the gradient to be gray, the rest of the 70% should be set to green. And there shouldn't be a spread of the color(not sure of the right term).
Any clues on how this can be achieved via CSS only.
I have tried the following code with no success, just pasting it for reference.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 700px;
width: 10px;
background-image: linear-gradient(180deg, transparent, transparent 50%, #fff 50%, #fff 50%), linear-gradient(180deg, orange 25%, black 75%);
background-size: 100% 20px, 100% 700px;
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
You could paint the vertical line n% in lime and then 100% - n% in gray.
Then overlay that with a repeating linear gradient of transparent and white.
.line {
height: 700px;
width: 10px;
background-image: linear-gradient(transparent 0 50%, white 50% 100%), linear-gradient(lime 0 71%, gray 71% 100%);
background-size: 100% 10%, 100% 100%;
}
<div class="line"></div>
You can use mask and gradient like below:
.line {
height: 300px;
width: 20px;
-webkit-mask: radial-gradient(circle closest-side, #000 96%, #0000) 0 0/100% 10%;
background: linear-gradient(red 60%, blue 0);
}
<div class="line"></div>
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>
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
I'm struggling to find a nice way to fade a vertical gradient at its left and right sides. Basically a top-bottom gradient with the left-right ends faded to 0% opacity.
I need it to be a Transparent fade out so that it can be on top of images/videos.
Here is a quick visual of what I am aiming for:
Any suggestions?
Pretty Simple, You just need to add transparent in a linear gradient.
div {
background:linear-gradient(to right, transparent, #00F5CB, transparent);
width: 100%;
height:64px;
}
<div></div>
Use multiple backgrounds. The first one is on top.
div {
width: 100%;
height: 100px;
background-image: linear-gradient( to right, white 0%, transparent 30%, transparent 70%, white 100%),
linear-gradient( to bottom, Lightgreen, Aquamarine);
}
<div></div>
You can try multiple background like this:
.box {
width: 500px;
height: 80px;
margin:auto;
background:
radial-gradient(ellipse at top, #7ff5b0 20%, transparent 70%) top center/80% 100%,
linear-gradient( to right, transparent 0%, #19d9ef 30%, #19d9ef 70%, transparent 100%);
background-repeat:no-repeat;
color: ;
color: ;
}
body {
background:pink
}
<div class="box"></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>