rounded diagonal line css

Question

Please tell me how to make such a diagonal line:

• shape:

• fiddle link + code:

HTML :

<div class="block"></div>

CSS :

.block {
    margin: 50px auto;
    width: 100px;
    height: 100px;
    background: black;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

I am looking for information how to do it but did not find.

Answer 1

Try 3D transforms - something like this:

demo

Relevant CSS :

body /* parent of .block in general */ {
    -webkit-perspective: 15em;
    perspective: 15em;
}
.block {
    -webkit-transform: rotateX(-5deg) rotateY(10deg);
    transform: rotateX(-5deg) rotateY(10deg);
}