<html>
<head>
<style>
#content {
  margin:100px;
  width:110px;
  height:110px;
  background:linear-gradient(skyblue,skyblue);
  transform:skew(135deg, 0deg);
  border:1px solid black;
}

#border {
  width:100px;
  height:100px;
  position:absolute;
  left: -5px;
  top: -5px;
  border:10px solid black;
}

</style>
</head>
In the example below you should see a skewed block filled with skyblue.

<div id="content">
  <div id="border"></div>
</div>
</html>