我需要实现这样的事情:
这个想法是菜单栏包含一个图像或文本来吸引右边用户的注意力。设计师想要一个从主 div 向下的圆圈。
如果可能的话,我宁愿不将布局实现为图像,还是必须将圆圈作为图像放置在 div 内?
谢谢。
您可以尝试将 div 与半径 css 对齐以创建曲线。
如果需要圆形,您可能必须在此处使用某种图像。我在 html 中所知道的没有内容区域允许圆形(除了使用半径边框选项)。
您可以创建一个 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>
要创建circle
效果,您可以使用
div {
border-radius: 10px;
}
这样,元素的边框将是模子并创建一个圆形,您可以使用更大或更小的此属性的值来使其成为圆形。然后使用以下命令将其放置在右侧:
div {
float: right;
}