css_html/css_WEB-ITnoseで作った丸、三角、楕円、矢印のアイコン

CSS3 のリリース以降、これまで画像が必要だった多くのアイコンが、わずか数個の CSS コードで完成できるようになりました。以下はCSSで作成した丸、楕円、三角、矢印のアイコンです。

円:

rree

楕円

.yuan{    width:100px;    height:100px;    -moz-border-radius:50%;     -webkit-border-radius:50%;     border-radius:50%;     background-color:red;}<div class="yuan"></div>

矢印:

.oval {     width: 200px;     height: 100px;     background-color: red;     -moz-border-radius: 100px / 50px;     -webkit-border-radius: 100px / 50px;     border-radius: 100px / 50px; }<div class="oval"></div>

Triangle:

.arrow{    content: '';    position: absolute;    width: 30px;    height: 30px;    border: 10px solid #f5b24a;    -webkit-transform: rotate(-135deg);    -moz-transform: rotate(-135deg);    -o-transform: rotate(-135deg);    -ms-transform: rotate(-135deg);    transform: rotate(-135deg);    border-top: none;    border-right: none;    top: 9px;}<span class="arrow"></span>

この記事は からの転載です: http://www.manongjc.com/article/57.html

CSSでのパターン作成に関するその他の記事:

CSS borderで実装された三角形パターン

CSSはborder属性を上手に使って様々なグラフィックス(長方形、台形)を作成します、トライアングル）

circle、triangle、ellipse、矢印のアイコンは、csss

css3ボーダーラジウス丸い角のボックスで作られています。