CSS 그리기 특수 그래픽 기본

1. 이등변삼각형

<span style="color: #800000;">.isosceles</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">30px solid</span>;<span style="color: #ff0000;">
    border-left-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-right-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-top-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-bottom-color</span>:<span style="color: #0000ff;"> red</span>;
}

2. 직각삼각형

<span style="color: #800000;">.right</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">30px solid</span>;<span style="color: #ff0000;">
    border-left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-right-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-bottom-color</span>:<span style="color: #0000ff;"> red</span>;
}

3. 서클

<span style="color: #800000;">.round</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;">50%</span>;   
}

4. 타원

<span style="color: #800000;">.ellipse</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;">50%</span>;   
}