用 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 class 的左下角对齐，然后将 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>

用 CSS3 绘制 45 度角

Drawing 45 Degree angle with CSS3

css

css-shapes