css3 div和锚标签在不同侧面进行变换

Question

我有两个div和一个锚标签。现在是第一个div，我想要将它仅仅转换为div的右侧和第二个div，我只想在左侧转换它。锚标签，我希望它左右两侧变换歪斜（请参考图像附加）。

我的HTML代码是：

<div class="box box1"></div>
<div class="box box2"></div>
<a class="theanchor" href="index.html" target="_blank">Home</a>

我的css代码是：

.box{
width: 900px;
height: 300px;
background: red;
}
.theanchor{
display: block;
padding: 8px 13px;
background: blue;
text-decoration: none;
}

到目前为止我尝试过的东西和我的第一个解决问题的来源是：

transform:skewX(10deg));

但没有任何作用，如果有人在这里可以指出我该怎么做或如何制作它，将不胜感激。提前谢谢。

Answer 1

我想我已经找到了解决此问题的方法，将容器div倾斜，然后创建一个内容div，该内容div使内容倾斜即可得到第3个形状。

要创建直角版本，我给内容div设置了背景色，并使用position：relative然后向左/向右偏移（取决于您想要的直角是哪一侧）

此处的示例： https://codepen.io/zarocreative/pen/Jjopdmr

div.skewed-heading-container {
  color: #FFF;
  background-color:#0096aa;
  display:inline-block;
  margin:20px;
  padding:0 20px;
  -ms-transform: skew(-20deg,0);
  -webkit-transform: skew(-20deg,0);
  transform: skew(-20deg,0);
}

div.skewed-heading-content {
  -ms-transform: skew(20deg);
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
  position:relative;
  right:-50px;
  background-color:#0096aa;
  padding:5px 30px;
}