-3

I am trying to create the arrow that links the block with the circle. I tried with ::before pseudoclass and border styles, but no success. How can I do it with CSS?

enter image description here

David Gheeorghe
  • 53
  • 1
  • 4
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Jun 10 '22 at 13:56
  • See whether [this](https://codepen.io/mayankcpdixit/pen/Mydzob) pen is helpful – Sadeed_pv Jun 10 '22 at 13:59

1 Answers1

0

Check this out

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  background: white;
  width: 200px;
  height: 100px;
  position:relative;

}

.item:after{
  content: '';
  width: 25px;
  height: 25px;
  background: white;
  transform: rotate(45deg);
  position: absolute;
   top: 0;
   right: 10px;
}
<div class="item">


</div>
A curious student
  • 139
  • 6