How do I make this card using html and css?

Issue

solo linktree example picture

This is one of the examples in solo.to linktree. I would like to ask how I can use html and css to present it.

I originally planned to use

float:left;

to make the image float so that the border of the text can cut through the image, but in the end I found that the image would only be pushed out by the border. I also tried to find out if there is a similar one Looks like it, but can't find it

Solution

My try (with different font and arrow)

• Pure HTML/CSS
• Zero images

div#main {
  position:relative;
  margin-left:calc(50% - 200px);
  margin-top:50px;
}
div#main div#orange-box {
  position: absolute;
  width: 80px;
  height: 80px;
  left: -40px;
  background-color: color(srgb 0.9694 0.4055 0.3275);
  box-shadow: 0px 5px 20px 5px color(srgb 0.9694 0.4055 0.3275 / 0.20);
  z-index: 3;
 }
 
 div#main div#orange-box div#rect {
  position:absolute;
  background-color:white;
  width: 8px;
  height: 40px;
  top: calc(50% - 20px);
  left:30%;
 }
  div#main div#orange-box div#circle {
  position:absolute;
  background-color:white;
  width: 35%;
  height: 35%;
  top: calc(50% - 20px);
  left:45%;
  border-radius: 50%;
 }
 
 
 div#main div#text-container {
  position: absolute;
  border:1.5px solid #EEEEEE;
  border-radius: 2px;
  box-shadow: 0px 5px 20px 5px #EEEEEE;
  width: 400px;
  height: 120px;
  top: -20px;
  z-index: 1;
 }
 
 div#main div#text-container span#arrow {
  position:absolute;
  right: 20px;
  top: calc(50% - 14px);
  color: #CCCCCC;
  font-family: Helvetica;
  font-size: 28px;
 }
 
 div#main div#text-container span#subscribe {
  position: absolute;
  left: 60px;
  top: calc(25%);
  font-family: Avenir Next, Serif;
  font-size: 24px;
  color: #565656;
 }
 
  div#main div#text-container span#patreon {
  position: absolute;
  left: 60px;
  top: calc(50%);
  font-family: Avenir Next, Serif;
  font-size: 20px;
  color: #CCCCCC;
 }

<div id="main">
  <div id="orange-box">
    <div id="circle"></div>
    <div id="rect"></div>
  </div>
  <div id="text-container">
    <span id="subscribe">Subscribe</span>
    <span id="patreon">patreon.com</span>
    <span id="arrow">→</span>
  </div>
</div>

Answered By - Philippe Perret