For the fun, I want to try to replicate the design from the Valorant loading map screen, and I am having the problem to replicate triangle on certain section. I will provide you the image so you can of course see what is the issue here. I tried using :before but I do not know how to make certain parts of the triangle transparent like on the image. I think of having two separate parts which will be separated so that always in the middle I have transparent space.
Image
I am talking about the triangle in the middle of this cool component, not the rhombus above it
Related
I am creating a banner for website. First image shape is on bottom rounded, second image should be right rounded. I tried with border-radius-left-bottom and right-bottom but can't achieve good angle on this.
Could you give me some tips on what should I use for this shapes and how to put image below the first one.
Also how to make it works with green pattern below the first one and on the right of smaller images.
I am trying to confine a background to a specific shape.
Example: I have a div or img tag that is square. Then I want part of it (the corners) to be transparent, and part of it (a diamond in the middle) to be a certain color (with background-color) or a certain image (with background-image).
I can simulate this by making a white png file that has a transparent diamond in the center, and setting the background of the image to what I want so the background shows through only in the diamond shape.
I want to get rid of the white part that shows around the edges (for example, have a transparent png with a white diamond in the center), but then the background will only show through on the edges. So basically, I want the background on the image to show where it isn't transparent, and not where it is transparent. I am almost certain this has to done with images, but if you have another option, let me know.
Here is an example http://jsfiddle.net/r7jxm/. You can see that all the images have white edges where it should be transparent, so the images below don't show through. I still need to be able to change the background colors in the end with css.
It doesn't have the best support, but CSS masks do exist.
They sound like they would achieve what you want.
I have a div that contains a background image of size 64x64. I would like to give this div a circular shadow or radial background when the user hover's over the div with the mouse.
If I simply give the div a box shadow, the shadow is cast around in a square shape. If I make the div have a radius, then I will need to make my div bigger than 64x64 so that it doesn't crop?
Have a look at at the following example that illustrates what I am trying to describe:
http://jsfiddle.net/rNeaZ/2/
The 4th example (shown in link above) in particular doesn't suit what I am after because:
it's size is much larger than my 64x64 image
the image looks to have a circular border now, which is not what I want; I am after a circular shadow or background behind it
It will probably just be easier and more effective and more efficient to add a nice radial shadow to an image sprite and change the location of the background image on hover.
The simplest solution would be to add an appropriate background-color, but that would only work when you need an offset of 0 0, like your example.
The more general case would be to create a pseudo-element and apply the shadow and background color to that. I can describe this in more detail if the first idea doesn't apply to your case.
I am currently making a website here. And to the right is a postcode search div. The top corner of that needs to be rounded.
I am using images to round the corners. I do not want to use another method unless it fully supports all browsers, up until IE7.
I have already done this on the navigation (to the left. only top right and bottom left corners). But I cannot seem to get it to work for the top left corner. Please help. This may be a silly little mistake I have made.
If the "postcode search div" is fixed width and height (as it appears to be), the simplest solution would just be to do the entire thing as an image, and set that as the background:
(yes, the images are the correct size and colour)
The problem is that your background color is covering your image. If you remove the background-color property, you will see the corner image.
Take your image http://molossi.psm2.co.uk/assets/images/li-bg-tl.png and add in the grey background with it. Set the width and height of the entire grey background element to 225x120 or whatever you want and you will be good to go. Basically move from it being just the corner image piece to the full image.
If you don't want to do it this way then take your corner image and make it 225px in length with the grey extending out all the way.
There are two methods for creating round corners without using border-radius (CSS3) and without using images:
Use four small divs of height: 1px and progressively increasing widths that create the round corner illusion. This is probably the better option. For a code sample, see the following site:
http://webdesign.about.com/od/css/a/aa072406.htm
Use an HTA file and browser hacks. I've never tried this personally. For code samples and techniques, see the following site
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
For older browser support using images is the best and probably only option. If you don't mind lower levels of browser support CSS3 Rounded Corners (in the CSS3 Boarders page of W3Schools) may have your answer.
I would like to create a theme for tumblr where two images are overlayed to appear as one image. The two images would be positioned one on top of the other with the top image masked in the shape of a triangle.
Here is a photoshop mockup of what I am hoping to achieve: http://s3.amazonaws.com/data.tumblr.com/tumblr_l6w6w3sdM51qa49m9o1_1280.png?AWSAccessKeyId=0RYTHV9YYQ4W5Q3HQMG2&Expires=1298329479&Signature=cUcRVwOWEp6m%2BDDnJgTs81rhPxA%3D
The only bit I am unsure about is the masking of the triangle image. Not sure if it is possible... Any ideas?
For cross browser compatibility, you need to create your mask as a transparent image in the shape you like. See my link below. I create a triangular mask in photoshop and applied it to an image.
Check working example at http://jsfiddle.net/39VG9/1/