如何制作css'snail'？

Question

我有一张图片，我想将其显示为带有 (border-radius:50%) 的圆圈，并且在同一行上，我希望有一些具有设置宽度和背景的文本。我不想硬编码任何值。实现此目标的最佳方法是什么？

这是一张图片

<div class="header">
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
    <p class="headingText">Hello</p>
</div>

.i {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.headingText {
    color: white;
    background: black;
    display: inline-block;
    width: 350px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

Answer 1

您可以尝试这样的操作：

.header
{
  padding-top:26px;
  padding-left:40px;
  position:relative;
}
.i
{
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  top:0;
  left:0;
}

.headingText
{
  color:white;
  background:black;
  display:inline-block;
  width:350px;
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
}

Answer 2

使用块元素来代替顶部边距为负（半圆大小 - 填充的一半）和左侧边距（半圆大小）。只需更改：

.headingText {
    /*display: inline-block;*/
    display: block;
    margin-top: -45px;
    margin-left: 40px;
}

示例fiddle：https://jsfiddle.net/c67dchhv/

Answer 3

只需在i中添加position: absolute class然后控制headingtext的边距：

HTML:

<div class="header">
  <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
  <p class="headingText">Hello</p>
</div>

CSS:

.i
{
  width:80px;
  height:80px;
  border-radius:50%;
  position: absolute;
}

.headingText
{
  color:white;
  background:black;
  display:inline-block;
  width:350px;
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
  margin: 40px 0 0 37px;
}

FIDDLE

Answer 4

如果您想定义任何高度和宽度，只需简单地制作 .header class position:relative;，.i class position:absolute; 在 .headingtext class https://jsfiddle.net/hamzanisar/aphzeyyt/ 上留出边距，也许它会对您有所帮助。

Answer 5

使用pseudo-classes和绝对定位你可以得到你想要的效果。

以下答案使用您现有的 HTML，因此您无需更改任何内容，只需更改您的 CSS。

如果需要，您可以在文本中添加更多的填充，使其间距更大一些，背景应该自行整理。

.header {
  position: relative;
  display: inline-block;
  margin: 30px;
  overflow: visible;
}
.header img.i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  bottom: 16px;
  left: -40px;
  z-index: 1;
  overflow: hidden;
  border: 3px solid black;
}
.header p.headingText {
  padding: 16px 32px 16px 80px;
  color: black;
  border: 3px solid black;
}

<div class="header">
  <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
  <p class="headingText">Hello</p>
</div>

如何制作css'snail'？

How to make a css 'snail'?

html

css

css-shapes