css-shapes

I'm trying to create an effect where I have a transparent arrow above any image in CSS3. See the following image. Any ideas how to do this effect? Using LESS if that comes to any help. To draw a transparent / inverted triangle in CSS3 you could use the CSS3 triangle technic , and make the inverted shape by combining the :before and :after pseudo objects, each to draw one part of the triangle. You could do something like this: .image { position:relative; height:200px; width:340px; background:orange; } .image:before, .image:after { content:''; position:absolute; width:0; border-left:20px solid

How to cut away part of an image or container diagonally using CSS? The part that needs to be cut away has the form of a triangle To be more specific: if the above picture is the image the blue part should be cut out, not the yellow The html should be: <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock"> </figure> or: <div class="container"> content </div> There is from my own investigation a lot of ways to do this, but most of them is hacky, so looking for a best approach Min browser support: IE11, latest webkits etc. Roope Use CSS3 -clip-path and polygon like this. You can specify

I know it's possible to skew but I don't see a way to skew each corner with a particular degree. Here's the project I'm working on: http://map.ucf.edu/ Looking specifically at the tabs within the menu. Right now I'm using images, I would like to change that for capable browsers. I know it's possible to create a CSS trapazoid , but that is using borders without content. The end result also needs a bit of rounded corners. edit: Starting with Zoltan Toth's solution I was able to achieve this: demo div { height: 20px; padding:2px 5px 0 5px; color:white; background: rgba(0,0,0,.5); margin: 0 10px;

I'm trying to figure out how to implement progressbar around rectangle. Let's image that I have div 500x300 with 5px (black) border. I would like that progress bar started in left top corner then goes to -> right corner -> bottom - right corner -> left bottom corner -> and back on start point. Pure CSS: This effect can be achieved with CSS using multiple linear gradients as background and positioning them appropriately. The approach is as follows: Create 4 thin linear-gradient backgrounds for each border of the element. The thickness of the border determines the background-size . That is, if

So I know how to do a basic box shadow with CSS3. You can see that in the top of the graphic below. The effect I'm trying to achieve is a 3D box shadow, as shown in the bottom of the graphic below. Any ideas on how to do this with CSS3 box shadows? Unfortunately box shadows are effectively just flat layers. However you can apply multiple box shadows to create this effect. .box-shadow-3d{ box-shadow: 1px 1px 0px #999, 2px 2px 0px #999, 3px 3px 0px #999, 4px 4px 0px #999, 5px 5px 0px #999, 6px 6px 0px #999; } you can use pseudo element for as shadow div { background: black; height: 100px; width:

Does anyone know how to draw concentric circles like the RAF symbol (concentric red, white and blue circles) using only CSS? web-tiki You can make 3 concentric circles with : one element border-radius:50%; to make the shape round padding and background-clip:content-box; for the white gap between the red and blue circles border for the outer blue circle div{ width:80px; height:80px; border-radius:50%; background-color:#CE1126; background-clip:content-box; padding:40px; border:40px solid #00247D; } <div></div> You can also use the approach described in Overlapping circles in CSS with 1 div with

I have a triangle with a javascript function that moves that image. The issue is that the element has a square shape so click and hover state are triggered ouside the triangle (see the red part in following image) : How can I prevent hover and click outside the triangle shape and allow click/hover state only inside the triangle shape? web-tiki To prevent hover and click outside the CSS triangle you can use transforms to make the the triangle. This technique is described here : CSS Triangles with transform rotate The point is to use a wrapper with hidden overflow and rotate the clickable

Is there a way to do an inverted rounded corner in CSS3, something approximately like the bottom left corner in the (crude) drawing below? /-------\ | | | | | | | ______/ |/ <---The left side is flush (straight), the slant should be rounded Perhaps border-radius could be combined with this technique ? Edit: I'm not looking for a speech bubble, but rather just a way to curve the right side of the point on the bottom left. Well, this is pure madness, but certainly there are ways to achieve this :-) not cross-browserly, but let's see: Our mark-up: <div id="bubble"> <p>This is madness!</p> </div>