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 with this image and turnning into a css equivalent

thanks!

enter image description here

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: 4px solid #546aa4;
border-bottom: 4px solid #546aa4;

Issue with above is that my text has no background anymore... if I use background-color, then I will have to use border-left: 10px solid white, which is not going to look good on different background images as this layer will sit on top on an image.

You are receiving downvotes because the question shows no research effort - you are basically asking us to do it for you, which is not welcome on SO. — kapa, Aug 15 '12 at 21:50
First, the code you posted seems to work, can you tell us what exactly is wrong? Second, why don't you want to use an image in your design? Using a background image for a shape like that is much more semantic and cleaner than using CSS border tricks or SVG to draw polygons. — Mike Deck, Aug 15 '12 at 22:02
@MikeDeck I would argue that - CSS does not need to be semantic. Using border tricks for simple arrows seems absolutely acceptable to me, but that's just an opinion. — kapa, Aug 15 '12 at 22:17
Overall I don't think this is a bad question at all, although perhaps it *could* be phrased better. — Oleg, Aug 15 '12 at 22:42

score 3 · Answer 1 · answered Aug 15 '12 at 21:41

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/

kapa · Accepted Answer · 2012-08-17T08:37:47.550

3

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.

edited Aug 17 '12 at 08:37

answered Aug 15 '12 at 21:45

kapa

77,694
21
158
175

issue with this is that it sits on top of an image and the background of that image will not always be white..so it looks awkard on other color images. – Asim Zaidi Aug 15 '12 at 22:14
@Autolycus I don't really understand what you mean. Could you create a demo? Or do you mean that the white arrow should be transparent? Why did not you mention it in your question? – kapa Aug 15 '12 at 22:19
yes the white arrow should be transparent. sorry about not mentioning in question – Asim Zaidi Aug 15 '12 at 22:36
@Autolycus It is still possible. [Quick demo](http://jsfiddle.net/f6Ayy/9/) but can still be played with. – kapa Aug 15 '12 at 22:44
1

+1 for a great edit! You should really use `content: '';` instead though, otherwise the dot is visible with your current settings! – Oleg Aug 16 '12 at 23:53
@o.v. Thanks, changed the `content`. – kapa Aug 17 '12 at 08:38

Oleg · Answer 3 · 2012-08-15T22:40:12.420

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

@Autolycus: unless it will arbitrarily change (static resources shouldn't - not like *that* at least), you'll have no problem downloading, encoding and including the image into your css — Oleg, Aug 16 '12 at 02:29

score 2 · Answer 4 · answered Aug 15 '12 at 21:56

If all you want to do is avoid linking to an external image file you could embed the image in your css or html directly.

Here's an example:

<!doctype html>
<html>
<head>
   <title>CSS Image Data Example</title>
   <style>
      #imgHolder {
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAvCAYAAACmGYWkAAADs0lEQVR42u2dS2sVSRSAjRoyGh8bNyKIiO+NgiCIOPhaGNQBb1clPggEF53b1bk4I4qIrwvqHxDECeqEpKqu4W5cCIIrt4rPhU9EGVz4REEFh9EZ4+mHN53Ef+B34IObe7t7ceCj6tSp6oxTxn0W/hO+CkMAMMw4ZewpbfwF+eOpfBZZPKIAfBdke1ibIYIsU5E7oI27KV/+Q2IAckGq1er4rq6+X3S3W6Jivz8w7r788IXkAIgg3yMMe5uDnr5FMooclx/uyojyLwkCBClEIklHPLhA6pBqYOwjueB/kgQIUgit6xN0RaZbxh6WCx6SJECQ0TE01LTt9/NzpB45KHXJg8B4ahJAkGIkxbs2dp5cZNKaJEYSQJARsTy80VwKe2fKdOuoXPxYMZIAgowdSTrifincbVVueCB8opkICDKqcN9qBheryB8SUW6pmCVgQJBRS8A3mnVkFwaROyI33s62pZBAQJARfZJUktjuSSVhJAEEGRlrqlcmBt1+voiyjz4JIMiPapJ6fYIu98/SMt3Sxr1RUbpdnoQCghQjiPxckeOYiHJHU5MAgoyNUmhnJnu3smYiNQkgyJg+SRDWFqnI7k+XgNPzJPRJAEFGbnCM7MKscLdXs2YiyQUEaURb5WTLDqlJRJI9MtW6l59zJ8mAIMWRJFsCdkfS8yRscAQE+cF0a3d9dsn4oypy15huAYKMPVDS1FZx09qN3a5ie51EA4IMR1P6EoiyXyFTrBOBcU9INCBIHp17L7cGkd8QxM5Lsf6UBiIgSD5ytFUutZTKbpWIcU4e/koZm7z0gZ4I/PSCNO2UmkNFdrU89LTwnDeiAII0eiCXWtpj/6uMGE54jRyAIIVlXdVj18jD/lRROnKQWECQVI4/6pNKxq8NIjcgD3vByAEIkvc5koNTiRza2Av5tIqEAoKkS7mdA60dFbs0ML5PHvKRfVeAIPnI0bl3oFVVzq9Wsf9LGc/IAQjSqDlMfYqK3XoV+TNy8zsSCAhS6HPontq6wNizWZ/DUpADgiSxa9e5qarcv1luqAXGPaPmAAQp9Dnay25VEDkvU6u3yAEIUnxRXLdbIqNGX1aQc9YcEKTRBMwKcntG6o4PJAsQpCCHjmsr071VvBQOEGT4P0slS7na2I3ZtIq9VYAgjSagDuvTdWQ3JatVwkvOcgCC5HJsCS9OTs5z6OQkYCYHfQ5AkCSSM+TZrlzbm29ZRw6ARJCOyuBS3WN/y6dV75EDoCCIFON/52LwcgWAUXwDOUawyI+Ht4oAAAAASUVORK5CYII=);
         width: 200px;
         height: 47px;
      }
   </style>
</head>
<body>
   <h1>Look, Ma, no external links!</h1>
   <div id="imgHolder">&nbsp;</div>
</body>
</html>

In this case I used the image data URL for the background-image css property, but you could also use the same URL for the src attribute of an <img> tag.

Andrew · Answer 5 · 2012-08-16T15:23:07.573

1

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/

edited Aug 16 '12 at 15:23

answered Aug 15 '12 at 21:46

Andrew

1,559
13
10

Please don't answer questions with a single jsFiddle link. Try to edit the relevant parts of your code into your answer. – kapa Aug 15 '12 at 21:49

alf · Answer 6 · 2012-08-15T21:54:35.830

1

It seems that you want a vectorial image. You can use the HTML svg tag to create a polygon:

<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>

http://jsfiddle.net/XDtXV/

edited Aug 15 '12 at 21:54

answered Aug 15 '12 at 21:47

alf

18,372
10
61
92

score 0 · Answer 7 · answered Aug 15 '12 at 21:52

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

score 0 · Answer 8 · answered Mar 26 '15 at 09:27

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>

turning an image into css

8 Answers8

Linked