如何使用css3創建一個圓角的箭頭框？

使用下面的我可以做一個有點圓的箭頭：如何使用css3創建一個圓角的箭頭框？

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

但它不是足夠清晰，箭頭框必須有一個流體高度，因此它可以包含文本響應。這可能與css3有關嗎？你可以看到我想要通過去http://dev.aaronpitts.ch/lhc/並點擊SDBS框來實現。我只想要更多的箭頭右側。

非常感謝

來源

2013-12-13 user1280853

所以，你不是在尋找一個完美的三角箭頭？你可以發佈你想要的油漆圖嗎？ – TreeTree

嘗試使用視口相對單位？ – Markasoftware

http://border-radius.com/ 如果您希望它看起來更像一個箭頭，爲什麼不使用圖標字體工具包，您可以使用實際的箭頭？或者使用響應式背景圖片？我認爲邊界半徑不會像你所需要的那樣尖銳。 –

試試這個：

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數據單元的大小將根據客戶的字體大小而改變。較大的文本大小意味着更大的箭頭和更大的半徑，對於小文本也是如此。這樣你可以有一個自適應箭頭。

希望有幫助！

來源

2013-12-13 02:32:28

試驗這裏你的邊界的半徑值：

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>

來源

2013-12-13 05:11:00 Mechame

如何使用css3創建一個圓角的箭頭框？

回答

相關問題