css-shapes

I have this image (attached). I am not a designer but I do not want to use the image in my app. I heard you can come very close to an image using css. Can someone help me with this image and turnning into a css equivalent thanks! TRIED <span class="xyz"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="0,0 100,0 100,40 0,40 20,20" style="fill:#46b"/> </svg> text </span> Not sure how to add that to my current css ALSO TRIED display: block; clear: both; width: 70%; height: 2%; float:right; margin-top: -50%; margin-right: 2%; border-left: 10px solid transparent; border-top:

I designed a navigation menu which looks like the image here: I want to code it with css3 rounded corners and box-shadows, not using any images. Problem is the rounded corner to the left of the first menu-item, and the one to the right of the menu... I call it a "reverse" rounded corner... It should have to change color on :hover . Is there any way to get this done in css only? And how? HTML <div class="menu"> <div class="outer_bg_left"> <div class="outer"> <div class="outer_shadow"> </div> </div> </div> <ul> <li class="menu_item_cont"><div class="menu_item">Item 1</div></li> <li class="menu

I need to create an image gallery, in which the individual images are irregular triangles (emphasis on irregular). I found limited examples on how to achieve triangle images via html and css, without modifying the images themselves. One example I found in this CodePen https://codepen.io/thebabydino/pen/liDCz was a step in the right direction, but looking at it, I can't find a way to make the images irregular triangles. The result I am trying to achieve is this: <div class='pageOption'> <a href='#' class='option'> <img src='~/images/team/pic_paggas/A.png'> </a> <a href='#' class='option'> <img

I would like to build a animated spinner with CSS3. It should behave like this : After the last state it should start again like in the first state. I managed to create circles using the technique explained here : stackoverflow question Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either. CSS3 spinner This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the

This question already has an answer here: Arrow before and after a box with CSS 1 answer I have a css arrow box overlaying an image slider but I need to make the tail indented and transparent so the image is seen behind it. Need the white portion to be transparent. See attached image and my css below. Thanks. #flag { width: 400px; height: 80px; background: #231f20; position: relative; } #flag:before { content: ""; position: absolute; top: 0; width: 0; height: 0; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 35px solid white; } #flag:after { content: ""

Looking to create this: What would be the best way to achieve it? IT MUST: I'd definitely like to keep the text as text (so not using an image). Also, I'd like this to be re-usable so that I can put different text in it. Ideally, the arrow part should be as high as the text. NICE TO HAVE: I'd like to be able to drop this on any background (so it isn't always on white) Would be great if it was ie8+ Thanks!! Sowmya Have you tried something using html/css?? #vert_menu{ overflow: hidden; width: 100%; } #vert_menu li{ float: left; } #vert_menu a{ padding: 8px 20px 8px 40px; float: left; text-align

I'm creating a speech bubble with CSS and I have reached this far. .says{ width: 200px; padding: 20px; margin-right: 20px; background: #BF7EF2; color: #fff; box-shadow: -3px 3px 5px #C1B9C8; position: relative; border-radius: 5px; } .says:before{ content: ""; position: absolute; z-index: -1; top: 14px; right: -18px; height: 20px; border-right: 20px solid #BF7EF2; border-bottom-right-radius: 25px 20px; transform: translate(0, -4px); box-shadow: -3px 3px 5px #C1B9C8; } .says:after{ content: ""; position: absolute; z-index: -1; top: 7px; right: -18px; width: 30px; height: 30px; background: #fff;

I have a rectangle where each side of the diagonal has it's own color div { width: 0; height: 0; border-left: 150px solid green; border-top: 100px solid gray; } Now I wanted to add a border-radius to the div, but then I noticed that this works fine for all sides except for bottom left. So if I add: border-radius: 10px 10px 10px 0; I get this : .. but as soon as I add a bottom left border-radius, I get this : 1) Why does this happen? 2) Is there an easy fix? Edit: I'm using Chrome, but I just looked a firefox and IE and the results are different! Firefox: IE 11 What's going on? Try to add a