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;
Related
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'm struggling to skew a div like the image below... whereby the bottom and top always cover 50% of the screen width if that makes sense.
I have attached an image for more info
EDIT: this is a photoshop image and I'm trying to recreate this with CSS.
I am not sure about the use case, but you can recreate this using 2 linear-gradient. Each one will have a triangle shape and will cover half the container.
body {
margin: 0;
}
.container {
height: 200px;
background:
linear-gradient(to top left, blue 50%,transparent 50.5%) left/50% 100% no-repeat,
linear-gradient(to bottom right, blue 50%,transparent 50.5%) right/50.5% 100% no-repeat;
}
<div class="container">
</div>
I'm porting a UI-based game from Unity to Cordova. In Unity, I was tinting predominately white images with various colors to reuse assets. The rough CSS equivalent seems to be using the [mostly standard] background-blend-mode property set to multiply and have the image in the background with the desired tint color as the bg color.
.tinted {
background-image: url('theimg.png');
background-size: 100% 100%;
background-color: #0f0;
background-blend-mode: multiply;
}
The problem is that it doesn't preserve the opacity of the image, namely the transparent parts become the tint color. The spec says something about blending from the top down so I thought it might relate to blending with the bg color, but it doesn't work if I layer a solid color (as a gradient) on top of the image either.
.tinted2 {
background-image: url('theimg.png'), linear-gradient(to bottom, #0f0, #0f0);
background-size: 100% 100%;
background-blend-mode: multiply;
}
Reversing the order of the background images or changing the blend mode to normal, multiply or multiply, normal doesn't work either. Any suggestions on how to do this correctly using CSS?
EDIT: As the answer mentions, the alpha aspect can be achieved using the mask property. I used a combination of the two techniques to get what I needed:
.tintedMasked {
background-image: url('theimg.png');
background-size: 100% 100%;
mask-image: url('theimg.png');
mask-size: 100% 100%;
background-color: #0f0;
background-blend-mode: multiply;
}
If I understand correctly what you're trying to do, then background blending is not the way, but masking.
div {
height: 200px;
background-image:linear-gradient(SlateBlue, Tomato);
-webkit-mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
}
}
<div></div>
<h1>No stairway??</h1>
That's assuming your mask images are alpha transparent PNGs. you could also use luminance mask by setting mask-mode: luminance;
I know it's possible to draw this background using only CSS (so without making use of image files). I'm curious on how I can do this. I've found a lot of information about making gradients and such with CSS3 on the web, but I've never found any guide that explains how to create something more advanced than this image as background in CSS. Any ideas on how to get started?
Not my fiddle, but I found this: http://jsfiddle.net/leaverou/RtGsM/
body {
background:
-moz-radial-gradient(white 15%, transparent 16%),
-moz-radial-gradient(white 15%, transparent 16%),
black;
background:
-webkit-radial-gradient(white 15%, transparent 16%),
-webkit-radial-gradient(white 15%, transparent 16%),
black;
background-position: 0 0, 80px 80px;
-webkit-background-size:160px 160px;
-moz-background-size:160px 160px;
background-size:160px 160px;
}
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