Can an image be inserted at the top left corner of a div's border by cropping the border?

I'm struggling to replicate a specific image design where the border cuts off within a certain distance.

Despite my best efforts, I can't seem to achieve the desired cut-off effect for the border.

Below is the HTML code for the quote and image:

<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 for Quote and Image

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

The current appearance resembles this image:

I've attempted using shape-outside without success, potentially due to the image being set to absolute positioning.

Here's the stethoscope image. It features a white image with no background.

htmlcss

Answer №1

To start off, make sure to reposition your image inside the text container and add borders to the right and bottom of it. Utilize pseudo selectors like :after and :before for creating the left and top borders.

For a more detailed explanation, please refer to this code snippet.

.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="https://i.sstatic.net/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>

Instead of using background color, consider incorporating a background image.

.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="https://i.sstatic.net/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>

Thank You...

Answer №2

Your image has a see-through background and is positioned above the border. To remedy this, you can set the border on an absolutely positioned pseudo-element (::before) and utilize clip-path to eliminate the top left corner:

.quote-container {
  padding: 5em;
  background: steelblue;
}

.quote-container-text {
  position: relative;
  width: 65%;
  padding: 2em;
  margin: auto;
  text-align: center;
  color: white; 
}

.quote-container-text::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid white;
  clip-path: polygon(55px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 55px, 55px 55px);
  content: '';
}

.testimonial-img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

body {
  margin: 0;
}
<div class="quote-container">
  <div class="quote-container-text">
    <img class="testimonial-img" src="https://i.sstatic.net/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>

Answer №3

To achieve this effect easily, consider using an image with a background color matching the outermost container's background. Keep in mind that setting an element to absolute makes it absolute to the innermost container with a relative positioning. While I used a random web image for illustration purposes, you can tailor it to fit your desired image. If you wish for your transparent image to have a background, enclose it in a div and apply a background to the div.

Start by moving the image inside the quote container text.

<div class="quote-container">
  <div class="quote-container-text">

  <div id="test-img-container">
    <img class="testimonial-img" src="https://cdn3.iconfinder.com/data/icons/medical-174/100/healthy-06-512.png" alt="">
  </div>
    <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>

Then, set the image to absolute with styling for top and left, and ensure the quote-container-text is relatively positioned:

.quote-container {
    padding: 5em 0;
    height: 100%;
    background:steelblue;
}

#test-img-container{
  position: absolute;
    left:-25px;
    top:-25px;
    background:steelblue;
}

.testimonial-img {
    width:50px;
    height:auto;
}

.quote-container-text {
    text-align: center;
    color: white;
    margin-top: 2em;
    border: 2px solid white;
    width: 65%;
    padding: 2em;
    position:relative;
    margin: auto;
}

It’s also beneficial to specify a fixed width for the image so that margins can be evenly applied.

https://jsfiddle.net/dgf1ms8r/7/

https://i.sstatic.net/nRK9I.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...

cssreactjsmaterial-ui

Altering calendar dates using VBA for web scraping

Seeking assistance with creating a VBA program for automatically downloading historical stock data from a website. The code I have currently works for downloading data, but I'm facing challenges in changing the date using my code. You can view the co ...

htmlvbaseleniumweb-scraping

What is the best way to align a collection of images in HTML and CSS?

Struggling to center five PNG images on a simple website for a friend. Previously, using display: block; and margin: auto; for one picture worked, as shown below. However, my current code: .middleContent{ width: 100%; top: 50px; p ...

htmlcssimagecenter

Prevent unauthorized access to HTML pages with a secure login system

I created a basic login system using JavaScript that requires users to enter the correct username and password. Once verified, they are redirected to log1.html. From there, they can access various subpages such as log1-sub.html. However, I am struggling to ...

html

Guide to dynamically implementing pagination through AJAX calls

In this javascript code snippet, I have a class named PurchaseHistory. var baseUrl = null; var parameters = null; var currentPageNumber = null; var TotalPages = null; var PageSize = null; $(document).ready(function () { baseUrl = "http://localhost/AP ...

javascriptjqueryhtml

Is it possible to access an external website by clicking on a link within a DIV element?

I have a basic website set up like this sample.php <html> <head></head> <body> <a id="myLink" href="http://sample.com">Click!</a> </body> </html> I displayed this website within a DIV-Container on a ...

javascriptphpjqueryhtmlcss

Is there a way to retrieve data from two tables by linking the foreign key in one table to the primary key in another table?

I'm currently working on a menu item and have run into an issue with the information being displayed for the second level submenu (letters). Despite trying various join methods, I am unable to get the correct data - it either pulls only one of my subm ...

phpmysqlhtml

"Utilizing Flask to efficiently manage a multitude of buttons and seamlessly update a

I am working on a web application similar to mini-tweets. The content for the posts is retrieved from a database and I want to include an 'up vote' button for each post, similar to the image shown below. https://i.sstatic.net/kJySO.png Each pos ...

pythonhtmlflaskformshttp-post

What is the best way to utilize variable fonts with Google Fonts?

Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...

cssfontsgoogle-fontsvariable-fonts

Generate a see-through overlay when hovering over an image that matches the image's precise dimensions

I have encountered a challenge that I need help with. On a webpage, there are multiple images of varying sizes. I am looking to create a feature where hovering over an image triggers the appearance of a div above it containing a button and text without dis ...

htmlcssbootstrap-4

The buttons on the Bootstrap Carousel are unresponsive and the indicators are not displaying as they should

I am currently attempting to replicate a bootstrap carousel that includes indicators. However, in my code, I am unable to view the indicators, and the previous/next buttons are not functional. Although I came across a workaround that I could modify from th ...

javascripthtmlcssbootstrap-5

Tips for creating sliding header content alongside the header

Is it possible for the content in the header to scroll up, displaying only the navigation list and hiding the logo when a user scrolls on the website? Currently, while the header background slides up, the content within the header remains in place. I feel ...

jqueryhtmlcssscrollnav

Utilizing opera and applying an inset box-shadow when active

Check out this link When viewing in Chrome, the button looks great. However, when switching to Opera, the box-shadow is not visible when the button is pressed (:active). This issue only occurs when the box-shadow on the :active state is set to inset, like ...

cssopera

Printing from a lengthy React DOM using window.print only generates a single page

My React component is capable of rendering markdown and can span multiple pages. Everything looks great when the component is displayed in the browser - scrolling works perfectly. However, whenever I try to print the page using window.print or ctrl + P, ...

cssreactjstypescriptreact-dom

Empty HTML elements

Is there a way to create empty HTML tags, meaning tags that have no predefined styling or effect on the enclosed content or its environment? For example, <p> creates a paragraph, <b> makes text bold, and <div> forms a container. I am in ...

htmlcsstags

How come this bootstrap text starts overlapping the image when I resize the screen?

In my Bootstrap 5.1 project with a fluid container, I have a row with two columns - one with a width of 3 and the other with a width of 9. Everything looks fine when the screen is fullscreen: https://example.com/image1.png However, when I resize the win ...

htmlbootstrap-5

Dynamic image swapping with Jquery: How to change image links on the fly

Hi there! I'm currently working on a code where I can change images dynamically and it's going well. However, I am facing a challenge with changing the links that correspond to each image dynamically as well. Does anyone have any suggestions on h ...

jqueryhtml

Ways to enhance an image by zooming in when the user reaches a designated area on the webpage

I have implemented a feature where an image zooms in to letter L when the user scrolls on the page. However, I want this zoom effect to occur only when the user reaches a specific section of the site, rather than immediately when the image loads. In my exa ...

javascripthtmljquerycss

Unraveling a Java String with HTML elements into a JsonObject: Step-by-step Guide

Hey there, I have a Java String that was received from an HTTP request and it looks like this: {SubRefNumber:"3243 ",QBType:"-----",Question:"<p><img title="format.jpg" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB..."></img></p>"} ...

javahtmljson

The radio input is not being properly checked using ng-checked in Angular

The ng-checked attribute is causing issues in the application, specifically with radio buttons. It seems to be working fine for checkboxes but not for radio buttons. <input type="radio" class="radio" name="job_class_radio" ng-checked="key===jobClassDat ...

javascriptangularjshtmlradio-button