Округленные стрелки с CSS [дубликат]

Возможные Дубликаты:
как создать треугольник в CSS3 с помощью border-radius

можно ли их сделать с помощью 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/ )

закругленная стрелка (я хочу, чтобы только нижняя сторона закруглена):

enter image description here

: (

9
css css3

3 ответов

Да, это возможно! Вы rotate коробка, дайте ему border-radius и использовать 45deg linear-gradient как background.

демо

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 среди своих тегов). Решение в этом случае было бы использовать сплошной фон и каким-то образом убедиться, что верхняя часть не будет отображаться, либо покрывая ее предыдущим элементом, либо обрезая ее (см. ответ Тим Медора предоставлена).

кроме того, на данный момент все еще нет поддержки неподготовленного синтаксиса (хотя это скоро изменится :D ), поэтому вам нужно будет либо вручную добавить префиксы -webkit-, -moz- и -o-. (Я не добавил их в демо, потому что Dabblet использует-prefix-free, который заботится об этом.)

19

вот способ сделать это, поместив повернутый квадрат внутри коробки для управления обрезкой. Лично я думаю, что решение @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;
}
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>
0