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

希望有所帮助！

Answer 2

在此处尝试边框半径值：

http://www.css3generator.in/border-radius.html

如果使用该工具无法获得所需内容，则需要寻找更复杂的解决方案。这是一个使用span元素，css旋转和jQuery。

http://jsfiddle.net/nG6xZ/5/

<!doctype>
<html>
<head>
<style>
div{
    background:#aaeeee;
    border:2px solid #99dddd;
    border-radius: 30px 5px 5px 30px/30px 5px 5px 30px;
    padding:10px;
    position:relative;
    width:200px;
    margin-bottom:20px;
}
div .arrow {
    background:#aaeeee;
    border:2px solid #99dddd;
    border-width:2px 2px 0 0;
    position:absolute;
    right:-17px;
    top:50%;
    margin-top:-16px;

    width:30px;
    height:30px;
    display:block;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    border-radius:5px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div>Text Here</div>
<div>Text<br />Here</div>
<script>
$('div').each(function() {
    $(this).append('<span class="arrow"></span>');
});
var resizeArrow = function() {
    $('span.arrow').each(function() {
        var parent = $(this).parent(),
            height = parseInt(parent.css('height'),10),
            padding = parseInt(parent.css('padding-top'),10)*2,
            border = parseInt(parent.css('border-top-width'),10)*2,
            hypotenuse = height + padding + border,
            sides = Math.sqrt((hypotenuse * hypotenuse) / 2);
        $(this).css({
            "width":sides+"px",
            "height":sides+"px",
            "right":-sides/2+"px",
            "margin-top":-sides/2+"px"
        });
    });
}
$(window).ready(resizeArrow);
$(window).resize(resizeArrow);
</script>
</body>
</html>

如何使用css3创建圆角箭头框？

2 个答案: