2

単一の HTML 要素を使用してどのように図形を作成できますか? 少なくとも 1 つのブラウザーでサポートされている限り、任意の CSS 手法を使用できます。

形状の例としては、丸い形、三角形、6 角形などがあります。

4

3 に答える 3

1

私はいくつかの純粋なhtml/css形状でこのフィドル
を作成しました： -スパンボーダーを使用した2つの三角形
-ボーダー半径の助けを借りた円

免責事項：私は古いグーグルアプリケーション/メニューバーからインスピレーションを得ました。

ソース：

html

An CSS triangle pointing down:
<span class="delta_down"></span><br>
An CSS triangle pointing up:
<span class="delta_up"></span><br>
Circle:
<span class="circle"></span>

css

span.delta_down {
        border-color: #C0C0C0 transparent transparent;
        border-style: solid dashed dashed;
        border-width: 5px 5px 0;
        display: inline-block;
        font-size: 0;
        height: 0;
        line-height: 0;
        padding-top: 1px;
        position: relative;
        top: -1px;
        width: 0;
}

span.delta_up {
        border-color: transparent transparent #C0C0C0;
        border-style: dashed dashed solid;
        border-width: 0 5px 5px;
        display: inline-block;
        font-size: 0;
        height: 0;
        line-height: 0;
        padding-top: 1px;
        position: relative;
        top: -1px;
        width: 0;
}

span.circle {
        border-radius: 50%;
        width: 10px;
        height: 10px;
        display: inline-block;
        background-color: #C0C0C0;
}
于 2012-09-25T07:19:02.623 に答える
0

これは、純粋な HTML と CSS では不可能です。ただし、canvas 要素を使用して、JavaScript ですべての図形を描画できます。

この基本的なチュートリアルが役に立ちます。

于 2012-09-25T06:54:51.687 に答える