Slanted element in 3D space with CSS3

Question

I'd like to make this slanted / rotated element with CSS3.

I've tried with clip-path but after the shape is created I can't add border, box-shadow or border-radius to it.

clip-path: polygon(5% 7%, 98% 0, 100% 83%, 0 74%);

I've tried with transform but this is not only rotated, because the sides have different orientation. Also I've tried with SVG, but information that I've found was insufficient for me to find a solution to my problem. This is my last solution, I'd rather use CSS3 than SVG, if possible...
Any sugestions?

Answer 1

You can use CSS3 rotate3d^MDN

• perspective on a parent element
• transform: rotate3d(x, y, z, a) on it's child

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
body{background: #2C8BF9;}



.slantedParent{
  position:relative;
  width: 300px; height:200px;
  top:10px; left:10px;
  
  perspective: 800px;
}


.slanted{
  background: #fff;
  border-radius: 32px;
  height:100%;
  padding: 32px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  
  transform: rotate3d(3, -2, 0.4, 25deg); /* play with those values */
}

<div class="slantedParent">
  <div class="slanted">
    <h1>Some content?</h1>
  </div>
</div>

Answer 2

Do something like this.

#shape {
	  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
	height: 100px;
	-webkit-transform: skew(-10deg);
	   -moz-transform: skew(-10deg);
	     -o-transform: skew(-10deg);
	background: red;
  border-radius:5px;
  box-shadow:0px 0px 4px #000;
 border: 5px solid #eee;
}

<div id="shape"></div>