如何在我的代码中实现此形状？

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居中，请在其上使用这些mergin设置（并且不浮动）：

margin:100px auto 0 auto;

http://codepen.io/anon/pen/KaepGZ（已编辑）

此外：

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

- ＆GT;这会将文本放在箭头上方，使其位置绝对，水平居中并设置固定bottom：

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

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