I'm trying to create a group of chevron shaped divs, and came across this article where the ribbon has an internal triangle shape.
http://css-tricks.com/snippets/css/ribbon/
I was trying to add an external border which would follow the triangle, which would achieve the affect I'm looking for without needing to use images.
Unfortunately, when I tried adding a box-shadow, I ended up with a square shadow around the div, not a shadow around the triangular bit.
Any suggestions on how to acheive this?
I don't think there is currently any simple solution to create CSS shadows of shapes other than rectangles and rounded rectangles (using border-radius). But I think a possibility (albeit more complicated) would be using CSS3 transform rotations along with the box-shadow. You can pick up some techniques here which perhaps you can modify to suit your need.
Related
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
I want to envelop my div in borders that look somewhat like this:
http://na.leagueoflegends.com/ ,
but I'm wondering what's the right approach to make this.
Is it just a border with images or is it something more complicated to get that border shape?
You can create any shape of your div using CSS3 and then apply borders to it. Have a look at
https://css-tricks.com/examples/ShapesOfCSS/
In this demo you can rotate the x axis to give a 3d illusion. Trying the rotatex() css option only seems provide part of the illusion.
In the top section of this image you can see the 3d illusion from the 'bigtext' demo. The text is not only rotated on the x angle but the edges of the text are slightly angled in towards each other making for a much better illusion.
What is the best method to achieve this?
I found the answer here. I needed to add the perspective to the parent div.
We all know it's possible to have rounded corners in plain CSS using the border-radius property. Is it also possible to have arbitrary corner shapes, specifically, using cubic-bezier?
It most definitely is, by using CSS masking. If you only care about the shape (so, not the color/thickness/etc that you get when you use the CSS border property) then setting up a "border shape" is identical to using "a clipping mask", with the kind of shape that is set up by border-radius is simply clipping with a "rectangle with rounded corners" mask.
html5rocks.com has lots of examples of absolutely crazy border shapes done this way.
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.