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));

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS81eENlYi5qcGcifQ==” alt =“在此处输入图像描述”>

但是没有任何效果，如果这里有人可以指点我怎么做或怎么做，将不胜感激。预先谢谢你。

Answer 1

[我想我已经找到了解决此问题的方法，通过倾斜容器div，然后创建内容div来使内容倾斜，这应该为您提供第三种形状。

要创建直角版本，我给内容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;
}