Есть ли HTML-код, который бы отображал эллипс или прямоугольник с закругленными углами? - PullRequest
Новая
       29

Есть ли HTML-код, который бы отображал эллипс или прямоугольник с закругленными углами?

5 голосов
/ 11 апреля 2010

Я не уверен, возможно ли это вообще в HTML, но я все равно спросил бы это здесь:

Существует ли какой-либо HTML-код, обозначающий эллипс или прямоугольник с закругленными углами?

Ответы [ 6 ]

9 голосов
/ 11 апреля 2010

С другой стороны, это вполне возможно! Вот и вы:

http://virkkunen.net/b/oh-dear.html

Чистый HTML! Он даже не использует новый CSS, JavaScript или whateverscript.

4 голосов
/ 11 апреля 2010

Если вы используете HTML и CSS, вы можете сделать это. Если вы не возражаете против использования CSS для браузера, вы можете заставить его работать в Firefox с -moz, Chrome и Safari с -webkit, а также в IE9 и Opera 10.5 с CSS 3, которые не начинаются с дефиса. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Rounded
        </title>
        <style type="text/css">
            div {
                -moz-border-radius-topleft: 6px;
                -webkit-border-top-left-radius: 6px;
                border-top-left-radius: 6px;
                -moz-border-radius-bottomleft: 6px;
                -webkit-border-bottom-left-radius: 6px;
                border-bottom-left-radius: 6px;
                -moz-border-radius-topright: 6px;
                -webkit-border-top-right-radius: 6px;
                border-top-right-radius: 6px;
                -moz-border-radius-bottomright: 6px;
                -webkit-border-bottom-right-radius: 6px;
                border-bottom-right-radius: 6px;
                border:solid 1px black;
                padding:10px;
                background-color:#efefef;
            }
        </style>
    </head>
    <body>
        <div>I'm rounded!</div>
    </body>
</html>
4 голосов
/ 11 апреля 2010

Да, Холст. Но это действительно HTML-тег Canvas в сочетании с Javascript. Узнайте больше о CANVAS здесь http://en.wikipedia.org/wiki/Canvas_element

2 голосов
/ 11 апреля 2010

Вы можете приблизиться к любому из них, используя найденный трюк здесь (позволяет отображать прямоугольные треугольники произвольного размера / положения, используя div)

Много и много div с относительно небольшими границами. Требуется много времени, чтобы жестко запрограммировать все высоты и ширины, но вы могли бы написать скрипт для генерации HTML-кода для вас.

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

1 голос
/ 11 апреля 2010

Радиус границы в CSS3 позволит вам сделать это в большинстве браузеров (кроме IE ... / spit). http://www.css3.info/preview/rounded-border/

HTML5 предоставляет тег canvas, который позволяет рисовать нечто подобное с помощью Javascript. Опять же, поддержка браузера все еще продолжается.

Однако вы, вероятно, никогда не сможете делать то, о чем просите, в чистом HTML.

0 голосов
/ 11 апреля 2010

Нет. Там нет.

...