Create CSS DIV Shape

Question

I've looked into so many CSS shape resources that it's ridiculous, but I can't seem to find my answer. I'm trying to create a div with this shape so that I can put a line of text inside of it.

Is this even possible? Or do I go the other route and use a background image instead?

Its better to do that with SVG instead of CSS. This answer could give you some ideas - http://stackoverflow.com/questions/20069723/how-to-transform-each-side-of-a-shape-separately/29821407#29821407 — Harry, Mar 11 '16 at 16:34
Ha! This seems to be the answer to my problem. I didn't realize I was trying the wrong thing. Thank you. =] — ticklishoctopus, Mar 11 '16 at 16:36
Use an image - you're going to hit so many browser incompatibilities it's just not worth the pain. But if you must then SVG as Harry suggests or HTML5 canvas - https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes — GJKH, Mar 11 '16 at 16:38
Actually, SVG support isn't as bad as I thought, as usual a few caveats for IE - http://caniuse.com/#feat=svg — GJKH, Mar 11 '16 at 16:40

score 0 · Answer 1 · answered Apr 21 '16 at 19:27

You may use transform 3D

see (out of many other links) https://css-tricks.com/almanac/properties/p/perspective/

div.pp {
  perspective: 500px;/* triggers 3d effects */
  padding: 0 2.5%;
}
div.rt {
  perspective: inherit;/* needed to reverse 3D transform effects on content */
  height: 150px;
  background: #333;
  border-radius: 5px;
  transform: rotatex(-10deg);
  box-shadow: 0 0 1px;/* blurs the edge*/
}
.rt p {
  font-size: 5vw;
  margin: 0 3%;
  color: white;
  transform: rotatex(10deg);/* restack text up */
}

<div class="pp">
  <div class="rt">
    <p>
      some text here ?
    </p>
  </div>

</div>

Create CSS DIV Shape

1 Answers1