Color a pixel in the div

Question

I don't know if it is tricky.

Here is a jsFiddle simple <div>hello</div>:

Is there any easy way to color the top left pixel of that div in red?

Thank you.

Answer 1

You can do this :

div:before{
    position: absolute;
    width:1px;height:1px;
    background:red;
    content:'';
}
div {
    position: relative;
    border:1px solid green;
    height:200px;
    background-color:yellow;
}

Demonstration (with a bigger red dot, so that it's obvious)

Answer 2

You should be able to use:

first-pixel-color-top-left-color: #f00;

Answer 3

For browser compatibility you could add a span inside your div:

<div><span></span>hello</div>

Then add styling:

div {
    border:1px solid green;
    height:200px;
    background-color:yellow;
    position:relative;
}

div span {
    position:absolute;
    height:1px;
    width:1px;
    background:red;
    top:0;
    left:0;
}

Answer 4

By this way :

div {
    position: relative;
    border:1px solid green;
    height:200px;
    background-color:yellow;
}

div span {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 1px;
    background: red;
}

http://jsfiddle.net/m3GMc/1/

Or via an image.