Я не уверен, возможно ли это вообще в HTML, но я все еще спросил бы это здесь:
Есть ли какой-либо HTML-код, который обозначал бы эллипс или скругленный прямоугольник?
Если подумать, то это вполне возможно! Вот, пожалуйста:
http://virkkunen.net/b/oh-dear.html
Чистый HTML! Здесь даже не используется новомодный CSS, JavaScript или whateverscript.
Вы можете приблизиться к любому из них, используя уловку, найденную здесь (позволяет отображать прямоугольные треугольники произвольного размера / расположения с использованием div)
Множество-много div с относительно небольшими границами. Жесткое кодирование всех значений высоты и ширины заняло бы много времени, но вы могли бы написать сценарий для генерации HTML-кода за вас.
Конечно, самым простым и быстрым (с точки зрения времени разработки, времени, необходимого для загрузки страницы и, вероятно, даже времени рендеринга) было бы использование чего-то другого, кроме чистого html, как уже предлагали другие люди здесь.
Да, Canvas. Но на самом деле это HTML-тег Canvas в сочетании с Javascript. Подробнее о CANVAS читайте здесь http://en.wikipedia.org/wiki/Canvas_element
Радиус границы в CSS3 позволит вам сделать это в большинстве браузеров. (кроме IE ... / плевать). http://www.css3.info/preview/ounded-border/
HTML5 предоставляет тег холста, который позволяет рисовать нечто подобное с помощью Javascript. Опять же, поддержка браузеров все еще продолжается.
Однако вы, скорее всего, никогда не сможете делать то, о чем просите, в чистом HTML.
Если вы используете 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>