css - CSSの丸い矢印

Question

重複の可能性：
border-radiusを使用してCSS3で三角形を作成する方法

CSSで作成することは可能ですか？

通常の矢印：

.some_element:after{      
  content: '';
  height: 0;
  width: 0;
  position: absolute;        
  top: 0;
  left: 0;       
  border: 100px solid transparent;
  border-top-color: #000;           
}

（http://jsfiddle.net/W3xwE/）

丸い矢印（下側だけを丸くしたい）：

:(

Answer 1

はい、可能です！あなたrotateは箱を与え、それを与えて、としてborder-radius使用します。45deg linear-gradientbackground

デモ

HTML：

<div class='arrow'></div>

CSS：

.arrow {
    width: 7em;
    height: 7em;
    border-radius: 0 0 2em 0;
    margin: 5em;
    transform: rotate(45deg);
    background: linear-gradient(-45deg, black 50%, transparent 50%);

}

矢印の角度を変えたい場合は、それも可能skewです。

CSSグラデーションがIE9でサポートされていないという事実を考慮に入れてください（タグの中でCSS3について言及しているため、今回は「またはそれ以前」とは言いません）。その場合の解決策は、無地の背景を使用し、前の要素で覆うか、クリップすることによって、上部が表示されないようにすることです（Tim Medoraが提供した回答を参照してください）。

-webkit-また、この時点ではまだプレフィックスなしの構文はサポートされていないため（ただし、これは間もなく：Dに変更されます）、プレフィックス、、、-moz-およびを手動で追加する必要があります-o-。（Dabbletはこれを処理する-prefix-freeを使用しているため、デモには追加しませんでした。）

Answer 2

これを行う方法は、回転した正方形をボックス内に配置してクリッピングを制御することです。個人的には、@Anaのソリューションの方がはるかにクリーンだと思います。

http://jsfiddle.net/K44mE/14/

<div id="outer"><div id="inner">&nbsp;</div></div>

#inner{
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color:silver;
    width:100px;
    height:100px;
    top: -70px;
    left: 20px;
    position:relative;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

#outer {
    position: absolute;
    width: 140px;
    height: 70px;    
    top:10px;
    left:10px;
    overflow: hidden;    
    border: 1px solid red;
}

Answer 3

CSS

 .arrow {
        width: 7em;
        height: 7em;
        border-radius: 0 0 2em 0;
        margin: -2em 2.5em;
        transform: rotate(45deg);
        background: linear-gradient(-45deg, black 50%, transparent 50%);

    }

HTML

<div class='arrow'></div>