# shape, shapepath element

Type: | Images and Specials
Attributes: | line-cap • line-join • align • background-color • background-image-dpi • background-image-position • background-image • background-pdf • border-color • border-style • border-width • border • clear • corner-radius • display • float • font-size • height • href • left • line-cap • line-height • line-join • margin • onmouseover • overflow • padding • page-break-after • page-break-inside • position • rotate • size • top • vertical-align • visibility • white-space • width • class • colorspace • direction • id • lang
See: | arcto bezierto circle ellipse lineto moveto

The shape element is a special type of block element, which allows simple Vector graphics operations to be drawn.
The shape should define both width and height attributes, and the document author may consider setting the overflow attribute depending on their needs. The shapepath tag takes no attributes at all.
Inside the shape is the shapepath element, which defines the actual shape that's being drawn and may contain can be as many calls to moveto, lineto, arcto and bezierto as necessary. Once the shape is completed, it is drawn with the shape elements border-color and background-color / background-image / background-pdf as for any other block element. The same border is used for all sides of the shape.
Any other elements inside the shape will be trimmed at the edge of the shape, in the same way as they would be for any other block element. This for instance allows you to create a paragraph of text inside an abstract shape (note the text will not be shaped to fit the shape, but will be drawn in a rectangle as normal and simply clipped at the shapes edge

Draw a simple shape

    <shape width="100" height="100">
      <shapepath>
        <moveto x="20" y="20"/>
        <lineto x="30" y="20"/>
        <bezierto cx1="70" cy1="30" cx2="30" cy2="70" x="80" y="80"/>
        <lineto x="20" y="20"/>
      </shapepath>
    </shape>

Draw a paragraph of text which is clipped at a diamond-shape

    <shape width="100" height="100">
      <shapepath>
        <moveto x="50" y="0"/>
        <lineto x="100" y="50"/>
        <lineto x="50" y="100"/>
        <lineto x="0" y="50"/>
        <lineto x="50" y="0"/>
      </shapepath>
      <p>This text will be clipped at the edge of the diamond, not shaped to fit it</p>
    </shape>