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>
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>
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/
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 3 years ago.
I know how to create triangles with CSS with borders and using images, but in my case, I'd like to use background color.
I want something like this image.
Can anyone help me?
An alternative is to use background linear gradient.
The trick is to set the direction to bottom right, set the first range as white (or transparent) and the second range as the color you want to triangle to be.
In the following example the first half of background is white (from 0% to 50%) and the second half (from 50% to 100%) golden yellow.
.triangle {
width: 200px;
height: 200px;
background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #a48d01 50%, #a48d01 100%);
}
<div class="triangle"></div>
Please note that this property is supported only by modern browsers (IE 11+, FF 49+)
The problem with creating triangles using CSS borders is their inflexibility when it comes to styling. As such, you can use a relatively fully pseudo fledged element instead, providing many more styling options:
Sure, you can do, e.g.:
Demo Fiddle
div{
height:50px;
width:50px;
position:relative;
overflow:hidden;
}
div:after{
height:100%;
width:100%;
position:relative;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
content:'';
display:block;
position:absolute;
left:-75%;
background-image:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
background-size:cover;
}
Try this tool to generate the shape you want: https://bennettfeely.com/clippy/. Then tweak the code according to your needs. For example, this is how you can get a triangle:
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Support, however, is not the best as it's only fully supported in Firefox and non-existant in Edge/IE and therefore discouraged to use on production websites Clip path support
I have some image pattern, and I want it to strike an element(e.g. body). I could create pseudo element with background and rotate it for n degree, but it's a bad solution because I don't know proportions of the block.
Any ideas how I could achieve it using CSS only?
While there isn't a CSS property that does what you want, it can be hacked in.
It's a bit ugly and it's not a real repeat, but it might work for you.
HTML:
<div class="container"></div>
CSS:
.container {
width: 500px;
height: 500px;
background-image:
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png"),
url("http://i.stack.imgur.com/R5Ux6.png");
background-position:
0% 100%,
10% 90%,
20% 80%,
30% 70%,
40% 60%,
50% 50%,
60% 40%,
70% 30%,
80% 20%,
90% 10%,
100% 0%;
background-repeat: no-repeat;
}
http://jsfiddle.net/z4FD3/
Here I repeated the same image 10 times. You can do it as many times as you want, just add more lines and smaller intervals between the positions (e.g.: 0% 100%, 2% 98%, 4% 96%).
why not making a pattern that will look like it goes slant like the example above