css градиент за стрелка с форма на триъгълник

Моля, погледнете http://jsfiddle.net/ghAgQ/ Имам нужда от същия градиент за стрелка, както е за правоъгълника. Някакви идеи как става това? Благодаря

.rectangle {
background-color: #EEE;
height: 80px;
width: 240px;
border: 1px solid #CCC;
background: white;
cursor: pointer;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white),             color-stop(37%,#F1F1F1), color-stop(57%,#E1E1E1), color-stop(100%,#F6F6F6));
float: left;
}

.arrow {

border-top: 41px solid transparent;
border-bottom: 41px solid transparent;
border-left: 15px solid #C4C4C4;
float: left;
cursor: pointer;

}

​


css linear-gradients css-shapes
person Mandar    schedule 14.09.2012    source източник
comment
Моля, винаги включвайте съответния код във вашия въпрос. Външните връзки са страхотни, но ако престанат да съществуват, въпросът ви пак трябва да е полезен за другите.   -  person James Montagne    schedule 15.09.2012

Отговори (2)


arrow_upward
33
arrow_downward

Можете да направите това по много по-прост начин, като използвате само елемент и завъртян псевдо елемент (всеки браузър, който поддържа CSS градиенти, също поддържа CSS трансформации и псевдо-елементи) с ъглов линеен градиент. Освен това не използвайте стария синтаксис на WebKit (вижте това малко за историята на синтаксиса).

Работа в текущи версии на Chrome, Opera, Firefox, IE на Windows.

ДЕМО

HTML е просто <div class='rectangle'></div>

Подходящ CSS:

.rectangle {
    float: left;
    position: relative;
    height: 80px;
    width: 240px;
    border: solid 1px #ccc;
    border-right: none;
    background: #eee linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
    cursor: pointer;
}
.rectangle:after {
    position: absolute;
    top: 16px; right: -25px;
    width: 48px;
    height: 47px;
    border-left: solid 1px #ccc;
    border-top: solid 1px #ccc;
    transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
    background: #eee linear-gradient(45deg, white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
    content: '';
}

Редактиране януари 2013 г

4 месеца по-късно имам леко подобрено решение. Този път стойностите са изчислени. Първият път, когато ги получих чрез проба и грешка.

нова демонстрация

.shape {
    float: left;
    position: relative;
    border: 1px solid #ccc;
    border-right: none;
    width: 240px; height: 80px;
    background: linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
    cursor: pointer;
}
.shape:after {
    position: absolute;
    top: 50%; right: 0;
    margin: -24px -20px;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    width: 40px /* 80px/2 */; height: 47px/* 80px/sqrt(3) */;
    transform: rotate(30deg) skewY(30deg); /* create a rhombus */
    /* 49.1deg = atan(1.15) = atan(47px/40px) */
    background: 
            linear-gradient(-49.1deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white);
    content: ''
}
<div class='shape'></div>

person Ana    schedule 15.09.2012
comment
Доста готино, но не идеално решение. Можете да видите, че границата на върха на стрелката не е еднакво дебела. - person weexpectedTHIS; 10.01.2013
comment
Това е страхотно, хубаво решение, но в момента не работи в последната версия на Chrome 28.0.1500.95 - person user979051; 19.08.2013
comment
Каква ОС? Работи ми в Chrome (версия 28.0.1500.95 m) на Windows 7. - person Ana; 19.08.2013
comment
Създадох решение с повече браузъри, вижте по-долу - person Roland Schütz; 13.09.2014
comment
@Ana можем ли да направим това отзивчиво като правене на ширина и височина в проценти в зависимост от наличната ширина и височина, то ще се разшири? - person atif; 13.12.2016
comment
Много полезен отговор! Поиграйте малко с това може да помогнете да създадете стрелка с ваши собствени параметри (цвят, ширина/височина, самия градиент). Много благодаря! - person Klimenko Kirill; 21.08.2019

arrow_upward
0
arrow_downward

Въпреки че демонстрацията по-горе изглежда наистина добре в Chrome, липсва информация за поддръжка на браузъра и не работи в много браузъри. Прекарах известно време, за да разработя по-многобраузърен подход.

ЕТО РЕШЕНИЕ ЗА ВСИЧКИ МОДЕРНИ БРАУЗЪРИ С ХУБАВА ФУНКЦИЯ ЗА ИЗГРАЖДАНЕ С ИЗПОЛЗВАНЕ НА SASS

.triangle {
    /* sample positioning */
    width: 160px;
    height: 160px;
    position: absolute;
    top: 30%;
    left: 45%;

    /*
     * deprecated syntax has better browser support
     * IE8+
     * http://css-tricks.com/almanac/properties/c/clip/
     */
    clip: rect(auto, 180px, auto, 100px);

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.triangle::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;

    /**
     * To also support IE 9 we you a background images
     * as fallback, created via compass:
     * @include background-image(linear-gradient(300deg, green, blue));
     */
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMDkxNTA2IiB5MT0iMC44NDE1MDYiIHgyPSItMC4wOTE1MDYiIHkyPSIwLjE1ODQ5NCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwODAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -moz-linear-gradient(150deg, green, blue);
    background-image: -webkit-linear-gradient(150deg, green, blue);
    background-image: linear-gradient(300deg, green, blue);


    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

В момента поддържа IE 10+, Firefox, Opera, Chroma, Safari

person Roland Schütz    schedule 13.09.2014