Question 405264 in Html Question posted in
Some basic documentation can be found here.

Draw shape using html/css

Need to create a shape attached.
Remove the icon border of an specific position and move that in the top left of the rectangle using css and html with bootstrap5. image is not positioning correctly inside 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>

enter image description here

Tags:

2

Answers


  1. 0

    Move to circle to top and add border with same color and it will look how you aspect. Below is working example of same.

    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>
    Login or Signup to reply.
  2. 0

    Add border to the circle and apply box-shadow to the top and left side of it using box-shadow: -1px -1px 0px 0px rgb(0, 0, 0); and border: 6px solid #4caf50; to the circle to achieve your result.

    .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 */
  margin-top: 5%;
  border: 1px solid #000;
}

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

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

.node-text {
  margin-left: 10px;
}
    
    <div class="node" style="margin-left: 10%;">
  <div class="node-image">
    <i class="bi bi-box"></i>
  </div>
  <div class="node-text">Name</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search