用CSS3绘制45度角

我正在尝试用CSS绘制45度角,第一个图像是我想要实现的,第二个是我管理的.我无法弄清楚如何将角度的外侧再切45度(见红色虚线).

.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;
}

最佳答案

你应该使用旋转而不是倾斜.我还改变了你的位置：在元素之前,它的右下角与你的轻弹类的左下角对齐,然后将变换原点设置为共享角,创建你想要的效果(我也把它移开了)从顶部,所以效果将是可见的)：

.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;
}