用CSS3绘制45度角

Question

我试图用CSS绘制45度角，第一张图片是我想要实现的，第二张是我所管理的。我无法弄清楚如何将角度外侧再切45度（见红色虚线）。

＆＃13;

＆＃13;

.flick .text {
  position: relative;
  z-index: 50;
}
.flick {
  background-color: #055468;
  color: white;
  margin-left: 140px;
  padding: 15px;
}
.flick:before {
  background: #055468;
  content: "";
  height: 100px;
  margin: -65px 0 0 -90px;
  position: absolute;
  transform: skew(45deg);
  width: 80px;
}

＆＃13;

<div class="flick"><span class="text">Hello world</span></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该使用rotate代替skew。我还更改了:before元素的位置，使其右下角与flick类的左下角对齐，然后将transform origin设置为共享角，准确创建你想要的效果（我也将它从顶部移开，以便效果可见）：

.flick .text {
  position: relative;
  z-index: 50;
}
.flick {
   margin-top: 200px;
  background-color: #055468;
  color: white;
  margin-left: 140px;
  padding: 15px;
  position: relative;
}
.flick:before {
  background: #055468;
  content: "";
  width: 100px;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 100%;
  transform: rotateZ(45deg);
  transform-origin: bottom right;
  width: 80px;
}

<div class="flick"><span class="text">Hello world</span></div>