这是我的代码笔 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>
最佳答案
考虑到您在图像上反转的整个元素的倾斜,我会采取不同的做法:
.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>
关于html - 如何从插图框阴影中删除左轮廓虚线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54658263/