html - 在 div 中创建圆形下拉菜单

Question

我需要实现这样的事情：

这个想法是菜单栏包含一个图像或文本来吸引右边用户的注意力。设计师想要一个从主 div 向下的圆圈。

如果可能的话，我宁愿不将布局实现为图像，还是必须将圆圈作为图像放置在 div 内？

谢谢。

Answer 1

您可以尝试将 div 与半径 css 对齐以创建曲线。

Answer 2

如果需要圆形，您可能必须在此处使用某种图像。我在 html 中所知道的没有内容区域允许圆形（除了使用半径边框选项）。

您可以创建一个 img 或 div 并将其相对于包含的主 div 定位以维护您的设计。

Answer 3

这将设置你的圆形 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>

Answer 4

要创建circle效果，您可以使用

div {
  border-radius: 10px;
}

这样，元素的边框将是模子并创建一个圆形，您可以使用更大或更小的此属性的值来使其成为圆形。然后使用以下命令将其放置在右侧：

div {
  float: right;
}