Как сделать прямоугольник с закругленными углами с вырезанным углом, используя CSS?

Question

Я хочу сделать прямоугольник в CSS с изящной деградацией для работы в IE8 +. И отлично работают в браузерах Chrome, Firefox и Safari.

Предполагаемый тег HTML: FRETE GRÁTIS

Смотрите образец: http://imageshack.us/photo/my-images/850/roundcutcorner.png/

Спасибо в

Answer 1

Чистое решение CSS

Вот пример jsFiddle со сравнением с исходным изображением и CSS:

span.tag {
 margin:4px 5px;
 position:relative;
 border-radius:5px;
 background:red;
 display:inline-block;
 padding:.6em 4.5em;
 text-align:center;
}
span.tag-gray {
 background: #7c7d80; /* Old browsers */
 background: -moz-linear-gradient(top, #7c7d80 0%, #7c7d80 50%, #66686b 51%, #66686b 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c7d80), color-stop(50%,#7c7d80), color-stop(51%,#66686b), color-stop(100%,#66686b)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* IE10+ */
 background: linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7d80', endColorstr='#66686b',GradientType=0 ); /* IE6-9 */
 color:#fff;
 font-family:sans-serif;
 font-size:.7em;
 font-weight:bold;
}
span.tag:after {
 /* right, height, and width should equal eachother */
 right:-18px;
 height:18px;
 width:18px;
 content:".";
 display:block;
 position:absolute;
 top:0;
 font-size:0;
 overflow:hidden;
 background:#fff;
 -moz-transform-origin:0 0;
 -moz-transform:rotate(-45deg) translate(-50%, -50%);
 -webkit-transform-origin:0 0;
 -webkit-transform:rotate(-45deg) translate(-50%, -50%);
 transform-origin:0 0;
 transform:rotate(-45deg) translate(-50%, -50%);
}

Предполагается, что HTML-код:

<span class="tag tag-gray">FRETE GRÁTIS</span>

Gotchas

• Чтобы заставить его работать со старыми (и другими) браузерами, вы можете добавить префиксные версии border-radius
• Чтобы заставить его работать в браузерах, отличных от webkit / moz, просто добавьте соответствующие префиксные версии transform и transform-origin
• «Вырез» не может быть прозрачным, но вы можете сделать так, чтобы он выглядел так же, как цвет фона (фона)
• Из-за использования border-radius вы не можете установить div.cut s overflow на hidden, так как фон div будет просвечивать по внешнему краю радиуса, поэтому вы должны убедиться, что у вас есть достаточно места за пределами элемента, чтобы избежать покрытия других элементов / текста. Обходной путь - установить фон для градиента и сделать внешний край прозрачным (он же справа)

Answer 2

забавное, но, вероятно, не лучшее решение - это покрыть ваше изображение треугольником div , используя position-absolute и z-index :).Чтобы скруглить углы, вы можете использовать border-radius (но он не будет работать в IE8, если вы не добавите js для поддержки свойств css3)

Answer 3

Если вы согласны с использованием одного изображения, вы можете сделать простое изображение белого треугольника с прозрачным фоном (PNG 24), а затем сделать что-то вроде этого:

.tag-grey {
    background: grey url(triangle.png) no-repeat right top;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
     border-radius: 5px 0px 5px 5px;
 }

Это не pure css, но он использует стандартный метод CSS. В результате это будет работать в IE7 и выше, без других закругленных углов.

Answer 4

Попробуйте это:

<div class="rounded">FRETE GRÁTIS<div class="tri"></div></div>

CSS:

.tri {
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 20px solid transparent;
    border-right:20px solid #ffffff;
    position:absolute;
    top:0px;
    right:0px;   
}

.rounded {
font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 6px 20px;
    background: -moz-linear-gradient(
        top,
        #c0c0c0 0%,
        #333333);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#c0c0c0),
        to(#333333));
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 0px solid #000000;     
    width:120px;
    position:relative;
}

А для IE8 я бы использовал CSS3 PIE

Answer 5

Является ли эта скрипка чем-то похожим на то, что вам нужно?Вот код для этого

`.tag.tag-gray {

    -webkit-border-radius: 5px;
    -webkit-border-top-right-radius: 300px;
    -moz-border-radius: 5px;
    -moz-border-radius-topright: 300px;
    border-radius: 5px;
    border-top-right-radius: 300px;

}`