3

Please tell me how to make such a diagonal line:

  • shape:

enter image description here

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.

Harry
  • 87,580
  • 25
  • 202
  • 214
  • look this tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/ –  Jun 03 '13 at 23:06

1 Answers1

6

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);
}
Community
  • 1
  • 1
Ana
  • 35,599
  • 6
  • 80
  • 131
  • Thanks, almost perfect, but does not work in IE8 and Opera 12.15. Perhaps even within the content? My attempt to align: [demo](http://jsfiddle.net/ShootingStar/WrQAh/4/) –  Jun 03 '13 at 23:48
  • @ShootingStar CSS3 is not supported by older browsers. The shape, in that case, needs to be created using images. – Yisela Jun 04 '13 at 00:07