用CSS3绘制45度角

前端之家收集整理的这篇文章主要介绍了用CSS3绘制45度角前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

enter image description here

.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;
}
原文链接:https://www.f2er.com/css/427388.html

猜你在找的CSS相关文章