用CSS3绘制45度角

Question

我正在尝试用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;
}

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

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>