Создать круговой выпадающий в div

Чтобы создать эффект circle вы можете использовать

div {
  border-radius: 10px;
}

Таким образом, границы элемента будут формироваться, и будет создана форма круга, вы можете использовать большие или меньшие значения для этого свойства, чтобы сделать его кругом. А затем поместите его в правую сторону, используя:

div {
  float: right;
}

Вероятно, вам придется использовать какое-то изображение, если оно должно быть круглым. Никакие области содержимого, о которых я знаю в html, не допускают круглую форму (кроме использования опции border radius).

Вы можете создать img или div и поместить его относительно содержащего главного div, чтобы поддерживать ваш дизайн.

Это создаст ваш округленный div без вершины, используя только css

<style>
#round {
  border:4px solid;
  border-radius:50px;
  width:100px;
  height:100px;
  border-top:none;
  border-right:none;
  border-left:none;
  vertical-align:middle;
  display:table-cell;
  text-align:center
}
</style>

<div id="round">Lipsum</div>

Было бы почти так же мало, чтобы использовать изображение svg,

<svg>
    <path stroke="#000" stroke-width="2" fill="none"
          d="M 75, 0 m -75, 0 a 75,75 0 1,0 150,0 " />
    <text text-anchor="middle" x="75" y="20">Lorem</text>
    <text text-anchor="middle" x="75" y="50">Ipsum</text>
</svg>