Create geometric designs using HTML and CSS

Looking to customize the positioning of an image inside a rectangle. The goal is to remove the icon border from a specific location and place it in the top left corner of the rectangle using css and html with bootstrap5. Currently, the image is not aligning correctly within the rectangle.

.node {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #4CAF50;
  /* Green background color */
  color: white;
  font-weight: bold;
  border-radius: 15px;
  width: 200px;/* Adjust as needed */
  height: 80px;/* Adjust as needed */
  padding-left: 50px;
  /* Space for the image */
}

.node-image {
  position: absolute;
  left: -25px;
  /* Half of the circle's diameter */
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.node-image i {
  width: 40px;
  height: 40px;
}

.node-text {
  margin-left: 10px;
}
<div class="node">
  <div class="node-image">
    <i class="bi bi-box"></i>
  </div>
  <div class="node-text">Name</div>
</div>

https://i.sstatic.net/32jtFOlD.png

htmlcssimagebootstrap-5

Answer №1

To achieve the desired look, move the circle to the top and add a border with the same color. A working example is provided below.

body {
  margin: 0;
  padding: 0;
}

.mainDiv {
  color: white;
  width: 100%;
  height: 100vh;
  background-color: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #4CAF50;
  /* Green background color */
  color: white;
  font-weight: bold;
  border-radius: 15px;
  width: 200px;
  /* Adjust as needed */
  height: 80px;
  /* Adjust as needed */
  padding-left: 50px;
  /* Space for the image */
}

.node-image {
  position: absolute;
  left: -25px;
  /* Half of the circle's diameter */
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  top: -14px;
  left: -10px;
  border: 5px solid #54b059;
}

.node-image i {
  width: 40px;
  height: 40px;
}

.node-text {
  margin-left: 10px;
}
<div class="mainDiv">
  <div class="node">
    <div class="node-image">
      <i class="bi bi-box"></i>
    </div>
    <div class="node-text">Name</div>
  </div>
</div>

Answer №2

To create the desired effect, add a border to the circle and apply a box shadow to its top and left side. Use the following CSS properties: 

box-shadow: -1px -1px 0px 0px rgb(0, 0, 0);
and border: 6px solid #4caf50;.

.circle {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #4CAF50;
  /* Green background color */
  color: white;
  font-weight: bold;
  border-radius: 15px;
  width: 200px;
  /* Adjust as needed */
  height: 80px;
  /* Adjust as needed */
  padding-left: 50px;
  /* Space for the image */
  margin-top: 5%;
  border: 1px solid #000;
}

.circle-image {
  position: absolute;
  left: -7px;
  /* Half of the circle's diameter */
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  top: -7px;
  box-shadow: -1px -1px 0px 0px rgb(0, 0, 0);
  border: 3px solid #4caf50;
}

.circle-image i {
  width: 40px;
  height: 40px;
}

.circle-text {
  margin-left: 10px;
}
    
<div class="circle" style="margin-left: 10%;">
  <div class="circle-image">
    <i class="bi bi-box"></i>
  </div>
  <div class="circle-text">Name</div>
</div>

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

Is there a way to use jQuery draggable to move a zoomed image within a div clipping mask?

Looking to enhance user experience, I am developing an interface that allows users to zoom in on an image and move the zoomed version within a clipping mask div. I have created a div with dimensions of 200px by 200px and set overflow: hidden. Then, I inse ...

jqueryhtmldraggableclipping

Another option instead of using the .siblings() method would be

Is there an alternative to using the .siblings() method in jQuery for traversing through divs of a specific class in separate container divs? How can this be achieved with the following code: HTML: <div id="container1"> <div id="1"></di ...

jqueryhtml

When it comes to printing, the @media rule for portrait orientation will not be effective if landscape orientation is also indicated

My goal is to create a div that will occupy the entire A4 page when printing, regardless of whether portrait or landscape mode is selected in the print dialog window. test.html: <!DOCTYPE html> <html lang="en"> <head> <me ...

htmlcssmedia-queries

What is the most reliable method for displaying an SVG shape in any color across various web browsers?

Is there a way to render a 2D SVG shape, which is flat and 100% black, in any color across various browsers? ...

csssvg

Unable to conceal adjacent radio buttons

My challenge is to use only HTML and CSS, without JavaScript, to show the first radio button with its label initially. When a user clicks on it, the second radio button and label should appear while the first disappears, and so on. I am struggling to ach ...

htmlcss

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Objective: I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholde ...

jquerycssimage

CSS - splitting the element in its current position (without going back to the start of the line)

In my e-commerce platform, I rely on pre-made solutions to help with changing the appearance without altering templates to avoid complications during updates. I am curious if there is a way to create a table effect without using standard CSS table styles ...

htmlcsslineline-breaks

I'm getting an error in the HTML from the Jive response - what's my next step?

Up to this point, I have successfully managed to parse JSON from a JIVE JSON response in order to deploy it on apps script. However, I am now encountering a malformed HTML error and am unsure of how to proceed. I have reached out to the Jive Community for ...

htmlgoogle-apps-scriptmalformed

How can I achieve a fade-in effect whenever the flag image is clicked?

A unique "international" quotes script has been created, showcasing Dutch, English, German, and French quotes. The script displays different quotes every day, with a draft-result visible in the upper right corner of this page ... The code used for this sc ...

javascripthtmlcssfadein

The IE condition is failing to work properly with .js and .css files

I've been trying to use this code to load the ie.css file specifically for IE browsers, but for some reason it's not working. I'm feeling a bit confused here - can anyone help me figure this out? <html> <head> <titl ...

htmlcssinternet-explorer

Implementing personalized SVG icons for list items

Here is some HTML code along with SCSS that I need help with: <div class="risk"> <ul> <li><span>Aggressive</span>Lorem ipsum dolor ...</li> <li><span>Growth</span>doloremque autem...</li ...

htmlcsssvg

Speeding up the loading time of my background images

body { background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed; background-size:100% auto; } I have unique background images on each of my sites, but they are large in size and take some time to load due to bein ...

javascripthtmlimagecss

What is the best way to show JavaScript output with span style?

I have added a translation feature that allows users to switch paragraphs to French when clicked. Each paragraph now has the first word wrapped in a span with a CSS class that enlarges and colors the text. However, I am facing an issue where when switchi ...

javascripthtmlcss

Preventing div contents from shrinking with changing screen sizes

I am currently working on creating a portfolio website similar to this one. Check out the Website Here Typically, when the screen size is reduced to less than half of the full width, the content of a website tends to be hidden rather than shrinking. Howe ...

css

eliminate element from array and refresh table

I am facing an issue with my code where I have an array bound to ng-repeat and a button. When the user clicks on the button, I want to remove an element from the array. Here is my current code snippet: var app=angular.module('app',[]); app.con ...

javascripthtmlarraysangularjsangularjs-directive

A guide on sending multiple input values using the same class name or id through ajax

My goal is to send multiple input values through AJAX to my PHP script. Everything works smoothly when I use getElementById. However, I have the functionality to add a child. The issue arises when it only retrieves values from the first child while iterati ...

javascriptphpjqueryajaxhtml

Tips for creating a functional Submit button in HTML

How can I ensure that the submit button sends the necessary information to my email address when clicked (e.g. [email protected])? If PHP is required, please provide the code so I can easily integrate it into my project. Thank you! <div id="forms ...

phphtmlcss

Ways to display multiple PHP pages in a single division

Within my project, I have a unique setup involving three distinct PHP pages. The first file contains two divisions - one for hyperlinked URLs and the other for displaying the output of the clicked URL. Here is an excerpt from the code snippet: <script& ...

javascriptphpjqueryhtmlajax

Currently, I'm developing a Django project and integrating django_bootstrap_icons. Despite successfully installing it with pip and completing all necessary steps, the icons are not displaying on the website

configurations.py INSTALLED_APPS = [ ... 'myapp', 'django_bootstrap_icons', ] ... STATIC_URL = '/static/' MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR,'static,'media') STATIC_ ...

pythonhtmldjangobootstrap-4offline

What is the best way to retrieve data from a database and display it in a select dropdown list

I'm working on creating a Bingo game and I want to include a dropdown list that displays my previous records. How can I retrieve data from a database to populate this select dropdown list? Below is the relevant code snippet in PHP: <html> < ...

javascriptphphtmljqueryajax