css3 div 和 anchor 标签倾斜变换在不同的边

Question

我有两个 div 和一个 anchor 标记。现在第一个 div，我只想在 div 的右侧转换它，第二个 div，我只想在左侧转换它。 anchor 标签，我想让它在左右两侧都倾斜(请引用附件图片)。

我的 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 来取消倾斜内容，这应该会给你第三种形状。

为了创建直 Angular 版本，我给内容 div 设置了背景颜色并用 position:relative 偏移它，然后是左/右(取决于你想要直 Angular 的哪一边)

这里的例子: 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;
}