html - 我怎样才能在我的代码中实现这个形状？

Question

我想知道如何实现 this shape进入我的网站。此外，当我将其复制并粘贴到我的网站时，字符串“单击下方的箭头以向下滚动”的文本位置得到调整，我希望它保持在箭头上方。 Here is my codepen

我将十六进制颜色更改为红色，以便您明白我的意思。

下面是我想在我的网站页面中间实现的圆形的 HTML/CSS 代码。我怎么也可以在这个对象上写文字？

<div id="shape">Rounded corners!</div>

#shape {
border-radius: 25px;
background: #111;
padding: 20px; 
width: 200px;
height: 150px;    
}

Answer 1

形状已经存在。 (?)

关于你写的文字:你有 margin-top:530px; 在你的 p 标签上，这使得它消失在另一个元素后面。删除或调整该边距。并在该元素及其 CSS 上使用一个类，否则所有 p 标签都将获得这些设置。

P.S.:要使您的 #shape DIV 居中，请在其上使用这些合并设置(不要 float ):

margin:100px auto 0 auto;

http://codepen.io/anon/pen/KaepGZ (已编辑)

补充:

http://codepen.io/anon/pen/LxrpPY

--> 这会将文本放置在箭头上方，使其具有水平居中和固定的 bottom 设置的绝对位置:

.arrowtext {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 75px;
}

但是您必须将该文本容器移动到您的部分中，在箭头元素上方。有关详细信息，请参阅我的第二个代码笔。