CSS Magic シリーズ: 純粋な CSS 描画グラフィックス (さまざまな形のレンガ)_html/css

CSS Magic シリーズ: 純粋な CSS 描画グラフィックス (さまざまな形のレンガ)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:35:02

オリジナル

1173 人が閲覧しました

私たちのウェブページは CSS のおかげで常に変化するスタイルを表現しています。この一見シンプルなスタイル言語は、非常に柔軟に使用でき、創造力を発揮すれば、想像を絶するような効果を実現できます。特に CSS3 の普及により、より斬新な CSS 作品が登場しています。

「CSS Magic シリーズ」では、Web ページやグラフィック描画における CSS の使用方法を紹介していきます。この記事では、数学でさまざまな形のレンガや石を描画するための純粋な CSS を紹介します。

興味がありそうな関連記事

35 の素晴らしい CSS3 アニメーション効果のデモンストレーション Web Frontier: 非常に豪華な CSS3 効果のセット Web Frontier: 驚くべき CSS3 アプリケーション厳選された 10 個のオンライン CSS3 コード生成ツール毎年恒例のお祭り: 最もエキサイティングな CSS3 チュートリアル2012年

Infinity

#infinity {    position: relative;    width: 212px;    height: 100px;}#infinity:before,#infinity:after {    content: "";    position: absolute;    top: 0;    left: 0;    width: 60px;    height: 60px;    border: 20px solid red;    -moz-border-radius: 50px 50px 0 50px;         border-radius: 50px 50px 0 50px;    -webkit-transform: rotate(-45deg);       -moz-transform: rotate(-45deg);        -ms-transform: rotate(-45deg);         -o-transform: rotate(-45deg);            transform: rotate(-45deg);}#infinity:after {    left: auto;    right: 0;    -moz-border-radius: 50px 50px 50px 0;         border-radius: 50px 50px 50px 0;    -webkit-transform: rotate(45deg);       -moz-transform: rotate(45deg);        -ms-transform: rotate(45deg);         -o-transform: rotate(45deg);            transform: rotate(45deg);}

ログイン後にコピー

ダイヤモンドスクエア

#diamond {	width: 0;	height: 0;	border: 50px solid transparent;	border-bottom-color: red;	position: relative;	top: -50px;}#diamond:after {	content: '';	position: absolute;	left: -50px;	top: 50px;	width: 0;	height: 0;	border: 50px solid transparent;	border-top-color: red;}

ログイン後にコピー

ダイヤモンドシールド

#diamond-shield {	width: 0;	height: 0;	border: 50px solid transparent;	border-bottom: 20px solid red;	position: relative;	top: -50px;}#diamond-shield:after {	content: '';	position: absolute;	left: -50px; top: 20px;	width: 0;	height: 0;	border: 50px solid transparent;	border-top: 70px solid red;}

ログイン後にコピー

ダイヤモンドナロー

#diamond-narrow {	width: 0;	height: 0;	border: 50px solid transparent;	border-bottom: 70px solid red;	position: relative;	top: -50px;}#diamond-narrow:after {	content: '';	position: absolute;	left: -50px; top: 70px;	width: 0;	height: 0;	border: 50px solid transparent;	border-top: 70px solid red;}

ログイン後にコピー

Cut Diamond

#cut-diamond {    border-style: solid;    border-color: transparent transparent red transparent;    border-width: 0 25px 25px 25px;    height: 0;    width: 50px;    position: relative;    margin: 20px 0 50px 0;}#cut-diamond:after {    content: "";    position: absolute;    top: 25px;    left: -25px;    width: 0;    height: 0;    border-style: solid;    border-color: red transparent transparent transparent;    border-width: 70px 50px 0 50px;}

ログイン後にコピー

に興味があります Web デザインにおける 20 の CSS3 最高の素晴らしいアプリケーションは 12 の美しい CSS3 ボタンの実装を推奨します10 個の非常に優れた CSS3 開発ツールを紹介します。50 個の非常に実用的な CSS3 ツールを共有します。

編集元：Dream Sky ◆ フロントエンド開発技術に注目 ◆ Webデザインリソースを共有