我要复制这张图片:
基本上，我希望边框围绕图像并在一定距离内切断。
我似乎无法切断边界。
这是引用和图片的 HTML
<div class="quote-container">
<img class="testimonial-img" src="./Photos/StethoscopeVector.png" alt="">
<div class="quote-container-text">
<h3>Testimonial Quote</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis<br/>erat vel ultricies imperdiet. Lorem ipsum dolor sit amet, consectetur<br/>
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscingelit."
</p>
</div>
</div>
引用和图像的 CSS
.quote-container {
padding: 5em 0;
height: 100%
}
.testimonial-img {
position: absolute;
margin-left: 11.5em;
margin-top: -3em;
}
.quote-container-text {
text-align: center;
color: white;
margin-top: 2em;
border: 2px solid white;
width: 65%;
padding: 2em;
margin: auto;
}
目前看起来像这张图片:
我试过使用 shape-outside 但它不起作用，我相信这是因为图像被设置为绝对。
这是 stethoscope图像。白色图像，无背景。
最佳答案
首先将图像移动到容器文本中，然后在其右侧和底部添加边框，并使用伪选择器 :after 和 :before 作为左边框和上边框。
更多解释请引用这个片段。
.quote-container {
padding: 5em 0;
height: 100%;
}
.testimonial-img {
position: absolute;
top: -50px;
left: -13px;
}
.quote-container-text {
text-align: center;
color: white;
margin-top: 2em;
border-right: 2px solid white;
border-bottom: 2px solid #fff;
width: 65%;
padding: 2em;
margin: auto;
position: relative;
}
.quote-container-text:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: calc(100% - 60px);
background-color: #fff;
}
.quote-container-text:after {
position: absolute;
height: 2px;
width: calc(100% - 100px);
right: 0;
top: 0;
content: "";
background-color: #fff;
}<body style="background-color: #2196F3">
<div class="quote-container">
<div class="quote-container-text">
<img class="testimonial-img" src="/image/nj8on.png" alt="">
<h3>Testimonial Quote</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis<br/>erat vel ultricies imperdiet. Lorem ipsum dolor sit amet, consectetur<br/>
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscingelit."
</p>
</div>
</div>
</body>用于背景图像而不是 bg-color。
.quote-container {
padding: 5em 0;
height: 100%;
background-image: url('https://media.istockphoto.com/photos/vintage-retro-grungy-background-design-and-pattern-texture-picture-id656453072?k=6&m=656453072&s=612x612&w=0&h=4TW6UwMWJrHwF4SiNBwCZfZNJ1jVvkwgz3agbGBihyE=');
background-repeat: no-repeat;
background-size: cover;
}
.testimonial-img {
position: absolute;
top: -50px;
left: -13px;
}
.quote-container-text {
text-align: center;
color: white;
margin-top: 2em;
border-right: 2px solid white;
border-bottom: 2px solid #fff;
width: 65%;
padding: 2em;
margin: auto;
position: relative;
}
.quote-container-text:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: calc(100% - 60px);
background-color: #fff;
}
.quote-container-text:after {
position: absolute;
height: 2px;
width: calc(100% - 100px);
right: 0;
top: 0;
content: "";
background-color: #fff;
}<body>
<div class="quote-container">
<div class="quote-container-text">
<img class="testimonial-img" src="/image/nj8on.png" alt="">
<h3>Testimonial Quote</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis<br/>erat vel ultricies imperdiet. Lorem ipsum dolor sit amet, consectetur<br/>
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscingelit."
</p>
</div>
</div>
</body>谢谢你...
关于html - 是否可以在切断边框的同时在 div 边框的左上角添加图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58456235/