border - 如何使用 css3 创建圆 Angular 箭头框？

Question

使用下面的内容我可以制作一些圆形箭头:

-webkit-border-radius: 20px 50px 50px 20px;
border-radius: 20px 50px 50px 20px;

但它不够清晰，箭头框必须具有流体高度，以便它可以包含响应式文本。这可以用css3来做吗？您可以通过访问http://dev.aaronpitts.ch/lhc/来了解我想要实现的目标。并单击 SDBS 框。我只是想要更多带箭头的右侧。

非常感谢

Answer 1

试试这个:

HTML

<div id="arrow">
    <p>This is a content</p>
</div>

CSS

#arrow {
    background-color: lightgreen;
    border: 0.2em solid darkgreen;
    border-radius: 2em 5em 5em 2em;
    height: 5em;
    text-align: center;
    width: 10em;
}

Live example

使用 em 数据单元，您的大小将根据客户端字体的大小而变化。较大的文本尺寸意味着更大的箭头和更大的半径，对于小文本也是如此。这样你就可以拥有一个自适应箭头。

希望有帮助!