How to remove left outline dotted line from inset box shadow?

Question

Here is my codepen https://codepen.io/alexrozario/pen/aXKawG.

Everything is working fine but the dotted outline on the right side is not appropriate. I want to remove that dotted outline.

Thanks for the help.

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

I don't see a dotted line (Chrome). What browser are you using? — Ryan Wheale, Feb 12 '19 at 20:33
I see what he means. If you remove the skew it's gone. Looks like a CSS rendering bug to me. Image: https://i.imgur.com/qErC6An.png — BugHunterUK, Feb 12 '19 at 20:33
Possible duplicate of [Anti-aliasing on rotated div with border image in firefox](https://stackoverflow.com/questions/20406355/anti-aliasing-on-rotated-div-with-border-image-in-firefox) — BugHunterUK, Feb 12 '19 at 20:35
Thanks, BugHunterUK for your help. Now it's perfect. Thanks again. — Alex Rozario, Feb 12 '19 at 20:40

score 1 · Answer 1 · answered Feb 12 '19 at 20:39

I would do this differently considering the skew on the whole element that you invert on the image:

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

Thanks for the help. But the bottom part is not exactly the same as me. — Alex Rozario, Feb 12 '19 at 20:46

score 0 · Accepted Answer · answered Feb 12 '19 at 20:38

0

You need to force the GPU rendering engine. Replace the transform with skew(20deg, 0deg) rotate3d(1, 1, 1, 0). Its usually a way to increase performance on animations and make them smoother but it also fixes bugs like this.

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

answered Feb 12 '19 at 20:38

Ginger Wizard

717
4
13

Great. Thanks for your help. And this solved my problem. If I use translateZ(1px), this also solved my problem. https://stackoverflow.com/questions/20406355/anti-aliasing-on-rotated-div-with-border-image-in-firefox. – Alex Rozario Feb 12 '19 at 20:49

How to remove left outline dotted line from inset box shadow?

2 Answers2