ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS は、矢印、ドット、三角形を実装します。 _html/css_WEB-ITnose
純粋な CSS は、矢印、ドット、三角形を実装します。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:52:491702ブラウズ
矢印:
.goback { position: absolute; top: 18px; left: 18px; border: 10px solid transparent; border-right: 10px solid #ccc; } .goback:hover { border-right: 10px solid #808080; } .goback:after { content: ''; position: absolute; top: -10px; left: -7px; border: 10px solid transparent; border-right: 10px solid #fff; } 3c55692e89f9c9ade80351f66394e22c16b28748ea4df4d9c2150843fecfba68
ドット:
.circle { position: absolute; margin: 52px 45px; width: 12px; height: 12px; background: #fff; border-radius: 50%; border: 1px solid #2090ff; } .circle:after { content: ''; margin: 3px; display: table; width: 6px; height: 6px; background: #2090ff; border-radius: 50%; } 1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68
三角形:
.triangle { position: absolute; top: 16px; right: 18px; border: 6px solid transparent; border-top: 6px solid #123456; } b8c713de88abd2d83347c6b37941285f16b28748ea4df4d9c2150843fecfba68
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。