is it possible to set the shape of an image not just with either straight or rounded shapes but with a mix of both?
I want my image in a emblem shape like this:
Image
Is this possible just with css or do i need further svg/canvas?
Thanks in advance
You can use the css clip-path or mask properties with an svg. Here are some examples:
Clip Path:
.element-clip-path {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
Mask:
.element-mask {
-webkit-mask: url(/path/to/mask.svg);
-moz-mask: url(/path/to/mask.svg);
-ms-mask: url(/path/to/mask.svg);
-o-mask: url(/path/to/mask.svg);
mask: url(/path/to/mask.svg);
}
Here is a great online tool you can use to create clip paths:
https://bennettfeely.com/clippy/
Related
I am trying to build the following element with rounded corners and a background image:
I originally used the :after pseudo element for the triangle, but I couldn't get the background image to 'bleed into' it as it's technically a separate element.
I decided to use clip-path to get the shape and the background functioning correctly. However, because the bottom of the element is where the triangle ends, border-radius only affects the top corners.
This is where I'm currently at:
.service_item{
min-height:100px;
background: var(--color-yellow);
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), 40% calc(100% - 20px), 30% 100%, 20% calc(100% - 20px), 0 calc(100% - 20px));
max-width:300px;
border-radius: var(--border-radius-card);
background-image:url('https://images6.alphacoders.com/321/thumb-1920-321927.jpg');
background-size:cover;
background-position:center;
min-height:300px;
}
Is there a way to curve corners using clip-path polygon, or is there a way to build this that I'm not seeing?
Thanks for your help
Ended up exporting the shape of the image as a png and using CSS Mask.
Has good browser support - https://caniuse.com/?search=mask
mask-image: url('path/to/image.png');
mask-size: 100% 100%;
mask-position: center;
How to fit my image in the correct position? I just straight away copy the code from CSS path maker through website. But I couldn’t resize the image from my actual image in HTML. May I know what are the codes that needed or any way to fix the image?
My Code script
.brazilimg{
background-image:url("image/brazil.jpg");
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 280px;
height:280px;
margin-top:400px; margin-left:60px; }
[my code script][1]
[CSS Clip Path Generator][2]
My final outcome after entering the code
The original image that I want to create image clipping
Your CSS is clipping the image but the image is not centred within the div so you get just the top part. Also there is a large top margin which means you just see the top part, as shown in your image in the question. Here's the whole clipped image - as you see, just the top part.
If we add to the .brazilimg class something that tells the system to center the image within the div, clipping the right and left sides so as to maintain the image's aspect ratio, we see the correct image. background-size: cover; is what we have added.
Here is a snippet showing the problem before the image is centred, but with the large top margin commented out so we see the whole image:
.brazilimg{
background-image:url("https://i.stack.imgur.com/bUUz7.jpg");
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 280px;
height:280px;
/*margin-top:400px;*/
margin-left:60px;
}
<div class="brazilimg"></div>
And here is a snippet with the cover added to centralise the image:
.brazilimg{
background-image:url("https://i.stack.imgur.com/bUUz7.jpg");
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 280px;
height:280px;
/*margin-top:400px;*/
margin-left:60px;
/* added to ensure the image is centrally located */
/* and make this CSS class more general for different images' aspect ratios */
background-size: cover;
}
<div class="brazilimg"></div>
I am trying to put gradient mask on image but it's not working
<div className="first-section">
<img src={BgPic} alt="Bg-pic" className="bg-pic" />
</div>
.bg-pic{
width:100%;
mask-image:linear-gradient(180deg, #000000 0%, #380A46 100%) 0% 0% no-repeat padding-box;
}
What's the correct way to use mask:
To understand how to correctly use mask you need to first refer to the mask-mode as detailed in the specification
The mask-mode property indicates whether the <mask-reference> is treated as luminance mask or alpha mask. (See Mask processing.)
<masking-mode> = alpha | luminance | match-source
The default value is match-source and when using gradient you will have:
If the <mask-reference> of the mask-image property is of type <image> the alpha values of the mask layer image should be used as the mask values.
gradients are images: https://drafts.csswg.org/css-images-3/#typedef-image
Then if you refer to the mask processing you will read:
The first and simplest method of calculating the mask values is to use the alpha channel of the mask image. In this case the mask value at a given point is simply the value of the alpha channel at that point. The color channels do not contribute to the mask value.
So using your gradient you will have nothing since the alpha channel of your colors are equal to 1
Either consider transparent (or semi-transparent) colors
img{
-webkit-mask: linear-gradient(180deg, transparent 0%, #380A46 100%) 0% 0% no-repeat padding-box;
mask: linear-gradient(180deg, transparent 0%, #380A46 100%) 0% 0% no-repeat padding-box;
}
<img src="https://picsum.photos/id/1/300/200" >
Or change the mode (will only work on Firefox)
img{
-webkit-mask: linear-gradient(180deg, #000000 0%, #380A46 100%) 0% 0% no-repeat padding-box;
mask: linear-gradient(180deg, #000000 0%, #380A46 100%) 0% 0% no-repeat padding-box;
mask-mode:luminance;
}
<img src="https://picsum.photos/id/1/300/200" >
Note that I am using mask and not mask-image which is what you need here since you are considering other values like mask-repeat, mask-position, mask-clip so the longhand property is the one needed here.
In this example I have a gradient of 2 colors, alignd to right.
background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);
Is there any way I can have more than 2 colors? For example may I add red color on the right of the second one?
Sure, just add color stops at every (100/numColors)%
div {
background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
width: 100%;
height:64px;
}
<div></div>
You can use multiply background, like this:
background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);
Also see this codepen for much combinations.
Late answer but no doubt it will help someone else in the future...
I have found a good website called CSS Gradient that generates your gradient color with full control and allows you to copy the CSS code.
This gradient was generated by this website:
div{
width: 100%;
height: 200px;
background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(30,250,0,1) 49%, rgba(4,0,255,1) 100%);
<div>
</div>
I'd like to achieve a custom image triangle shape with rounded corner like this using css
I looking for how achieve like this but nothing,
i want to achieve my css can do result like this,any ideas?
Sorry if my question has looks like other question
Thanks
You could use clip-path. It allows you to show only part of an element and hide the rest, so make a polygon with sufficient dots for the rounded effect at corners.
.tri {
position: relative;
width: 130px;
height: 130px;
background: url("http://pdphoto.org/images/tacos.jpg");
clip-path: polygon(1% 78%, 46% 2%, 49% 0, 54% 0, 57% 2%, 98% 78%, 98% 83%, 95% 87%, 89% 88%, 6% 89%, 2% 87%, 0 83%);
}
<div class="tri"></div>