Question

这是我的Codepen https://codepen.io/alexrozario/pen/aXKawG。

一切正常，但右侧的虚线框不合适。我要删除虚线轮廓。

感谢您的帮助。

.title {
    position: relative;
    color: #FFF;
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.title img {
      box-shadow: 15px 15px 0 0 red;
      margin: 0;
      padding: 0;
}
.title:after {
    content: " ";
    position: absolute;
    display: block;
    width: 205px;
    height: 100%;
    top: 0;
    right: -15px;
    z-index: 1;
    background: #fff;
    transform-origin: top left;
    -ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
    overflow: hidden;
    box-shadow: inset 15px 0 0 red;
    border-top: 15px solid transparent;
}

<div class="title">
  <img src="https://images.unsplash.com/photo-1549876612-f9ea53d45266?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
</div>

Answer 1

考虑到您在图像上反转的整个元素的偏斜，我会采取不同的方式：

.title {
  display:inline-block;
  box-shadow: 15px 15px 0 0 red;
  transform:skewX(20deg);
  transform-origin:bottom left;
  overflow:hidden;
}

.title img {
  margin: 0;
  padding: 0;
  width:300px;
  display:block;
  transform:skewX(-20deg);
  transform-origin:bottom left;
}

<div class="title">
  <img src="https://images.unsplash.com/photo-1549876612-f9ea53d45266?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
</div>

Answer 2

您需要强制使用GPU渲染引擎。用skew(20deg, 0deg) rotate3d(1, 1, 1, 0)替换变换。通常，这是提高动画性能并使其更流畅的一种方法，但它也修复了此类错误。

https://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

如何从插图框阴影中删除左侧轮廓虚线？

2 个答案: