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

How to create circled kind of bubble with arrow full background image using css – Html

enter image description here.

tried with css after and before but unable to achieve the particular shape

Tags:

2

Answers


  1. 0

    Try this:

    .tooltip {
  position: absolute;
  padding: 25px;
  left: 20%;
  top: 40%;
  width: 50px;
  height: 50px;
  background: #f2709c;
  border-radius: 50%;
}

.tooltip:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -20px;
  right: 0;
  border-bottom: 50px solid #f2709c;
  border-left: 40px solid transparent;
  rotate: 173deg;
}
    <div class="tooltip">
</div>
    Login or Signup to reply.
  2. 0

    You can give a try to clip-path and background-attachment.

    body {
  margin: auto;
  background: black;
}

section {
  /* draw simili borders */
  filter: drop-shadow( 3px 3px 1px white) drop-shadow(-3px 3px 1px white) drop-shadow(3px -3px white) drop-shadow(-3px -3px white)
}

div {
  /* let's be  a square */
  aspect-ratio: 1/1;
  /* any width or height */
  width: 20vw;
  /* turn me into a circle */
  border-radius: 50%;
  /* make the positionning reference */
  position: relative;
  /* stick a background */
  background: url(https://www.highresolutiontextures.com/textures/concrete-walls/hrt-concrete-wall-02.jpg) center;
  background-attachment: fixed;
}

div:before {
  content: '';
  position: absolute;
  width: 50%;
  aspect-ratio: 1/2;
  top: 50%;
  left: 50%;
  /* remove some of it */
  clip-path: circle(100% at -58% 0%);
  /* stick here the background again */
  background: inherit;
}


/* show me that pseudo */

div:hover:before {
  background: red;
}


/* to center the demo */

html {
  display: grid;
  min-height: 100vh;
}
    <section>
  <!-- section here to draw the border via filter -->
  <div>
    <!-- I will be a square with an overflowing pseudo -->
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search