Как создать такой угол в CSS

Question

...

альтернативный текст http://shup.com/Shup/329122/1104381445-My-Desktop.png

Я проверил здесь http://www.css3.info/preview/rounded-border/ но все углы имеют округлую форму.

Answer 1

Плагин Jquery Corner

Corner - простой плагин для создания закругленных (или других стилей) углы на элементах.

Answer 2

Да, только круглые / эллиптические границы доступны через CSS. Если вы хотите другие формы, вам придется использовать изображение.

Можно получить прямые диагонали, злоупотребляя объединениями границ:

<div style="background: gray; height: 100px; width: 200px; position: relative;">
    <div style="height: 1px; width: 1px; border-top: solid gray 20px; border-right: solid white 20px; position: absolute; bottom: -1px; right: 0;"></div>
</div>

Не уверен, что это особенно хорошая идея.

Answer 3

Улучшение идеи Бобинса, которая использует два элемента, вы пробовали использовать фоны? Они позволяют вам прикрепить обычный цветной фон плюс движущийся пользовательский фон, прикрепленный внизу:

element {
  background: gray url(cornerImage) no-repeat bottom right;
}

Это лучше, чем плагин jQuery, так как не требуется никаких сценариев (чего следует избегать для максимально возможного представления). Угловое изображение будет просто маленьким квадратным изображением с серыми и белыми треугольниками.