CODEWITHSUNDEEP
htmlcss
Alex Rozario
Alex Rozario

Reputation: 15

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

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>

Upvotes: 0

Views: 321

Answers (2)

Temani Afif
Temani Afif

Reputation: 273031

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>

Upvotes: 1

Ginger Wizard
Ginger Wizard

Reputation: 717

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

Upvotes: 0

Related Questions