Haradzieniec
Haradzieniec

Reputation: 9340

Color a pixel in the div

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.

Upvotes: 0

Views: 1812

Answers (4)

Romain
Romain

Reputation: 1

You should be able to use:

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

Upvotes: 0

Hotgeart
Hotgeart

Reputation: 384

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.

Upvotes: 0

DonJuwe
DonJuwe

Reputation: 4563

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

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382092

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)

Upvotes: 3

Related Questions