turning an image into css

Question

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 wi

Answer 1

I've yet to see an approach using pseudo elements here, so I thought I'd add one here. This is presuming that you're giving your div a set height:

div{
  height:50px;
  width:200px;
  position:relative;
  margin-left:25px;
  background:tomato;
  }

div:before{
  content:"";
  position:absolute;
  top:0;
  left:-25px;
  border-top:25px solid tomato;
  border-left:25px solid transparent;
  }


div:after{
  content:"";
  position:absolute;
  bottom:0;
  left:-25px;
  border-bottom:25px solid tomato;
  border-left:25px solid transparent;
  }

<div></div>

Answer 2

With "I don't want to use an image in my app" being a rather vague requirement, you may find data URIs an appropriate alternative:

.xyz{
  background:url(data:image/png;base64,/*encoded image*/);
}

I'm a big fan of using these sparingly - they remove the need of an additional http request if the image is external, they do not require as much rendering resources on the client as heavy sprites would and they are (except for most trivial cases with the graphics simpler than yours) faster to render than CSS3 effects.

Edit: base64 encoding is part of some LESS/SASS css pre-processing implementations and there are online encoders available for one-off usage, for instance this one (just remember to remove all line breaks from the data uri)

Fiddled

Answer 3

Here is a good start of what you can do.

<style>
#button {
   width: 120px; 
   background: #546AA4; 
   border-left: 40px solid white;
   border-top: 24px solid transparent;
   border-bottom: 24px solid transparent;
}
</style>

<p id="button"></p>

See: In Action

Answer 4

If you have <div class="magic">, you could apply this style:

.magic { 
    width: 200px; 
    height: 50px; 
}
.magic:before {
    content: '.';
    float: left;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 25px solid white;
    border-bottom: 25px solid transparent;
}

​Change dimensions to your own taste. This trick is called CSS Triangle.

jsFiddle Demo

EDIT: Or a quick demo with a transparent arrow - here you basically use different border colors for the tricky borders and a way to move the arrow to the left - I used position: relative - so the div's background won't cover what is underneath.

Answer 5

Here's an example to get you started:

HTML:

<div class="box">
    <div class="flag"></div>
</div>​

CSS:

.box {
    /* Set dimensions and color of containing box */
    width: 100px;
    height: 30px;
    background: #03e;
}

.flag {
    float: left;
    /* Set left border to control width and color of flag */
    border-left: 20px solid #fff;
    /* Set top and bottom border each to half of box height */
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    width: 0;
    height: 0;
}​

Fiddle link: http://jsfiddle.net/kHDFp/

Answer 6

In the sense that HTML elements can be styled, yes, a shape like that could be created. You'd have to use multiple DIVs to accomplish it. Here's a site that gives a nice overview of creating basic geometric shapes using border styles:

http://css-tricks.com/examples/ShapesOfCSS/