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

Question

使用下面我可以制作一个圆 Angular 箭头:

-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 数据单元，您的大小将根据客户端字体的大小而变化。更大的文本大小意味着更大的箭头和更大的半径，对于小文本也是如此。这样您就可以拥有自适应箭头。

希望对您有所帮助!