コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

css_html/css_WEB-ITnose でグラフィックを描画する

WBOY
リリース： 2016-06-24 11:33:36
オリジナル
1191 人が閲覧しました

CSSのborder-radius属性を上手に使うと綺麗なグラフィックも描けます

htmlパート





CSS でグラフィックを作成する








css パート

div{
margin: 8px;
}
.rectangle{
width: 250px;
height: 150px;
background: #6DC75F;;
}
/*triangle*/
.sanjia{
border -左: 75 ピクセルのソリッド透明;
ボーダー右: 75 ピクセルのソリッド透明;
ボーダー下: 150 ピクセルのソリッド #6DC75F;
幅: 0;
高さ: 0;
}
/*ellipse*/
.tuoyuan{
幅: 300px;
高さ: 150px;
背景: #6DC75F;
border-radius: 150px/75px;
-webkit-border-radius: 150px/75px;
-moz-border-radius: 150px/75px;
}
/*moon*/
.yueliang{
width: 150px;
height: 150px;
/*background: #6DC75F;*/
border-radius: 50%;
box-shadow: 15px 15px 0 0 green;
}
/*葉*/
.shuye{
幅: 150px;
高さ: 150px;
背景: #6DC75F;
境界半径: 40px 300px 5px 300px;
}

関連ラベル：
用css绘制图形
ソース：php.cn
前の記事：軽量でカスタマイズ可能な CSS ライトボックス フォト アルバム プラグイン_html/css_WEB-ITnose 次の記事：HTMLデザインパターン学習メモ_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか? 各行の下にスペースがあるのはなぜですか? (CSS) 自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボード...
から 2024-04-05 11:39:02
0
1
1431
CSS Clip-path:circle() プロパティを使用して画像の周囲に円形の境界線を作成します 画像に枠線を追加する方法を知りたいですclip-path:circle(); 他に枠線を追加する方法はありますか？例: border: 5px ソリッドレッド; 私はこれを試しまし...
から 2024-03-31 17:35:30
0
1
410
HTML、CSS、SVG を使用してスケーラブルな標識を作成する 道標（先端のある長方形）の形のボタンを作成したいと考えています。 _______|\|_______/各テキストの長さが異なるテキストを動的にロゴに書き込みたいと考えています。グラ...
から 2024-03-31 14:45:14
0
1
294
配列 JS 内の 52 枚の画像 私は IT Assistant 1 年を勉強しており、現在 JavaScriptHTML と CSS を使用してカード ゲームを作成する必要があります。私の質問は、52 枚のカード...
から 2024-03-30 21:14:49
0
1
272
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート