検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >純粋な CSS は、矢印、ドット、三角形を実装します。 _html/css_WEB-ITnose

純粋な CSS は、矢印、ドット、三角形を実装します。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:52:491772ブラウズ

矢印: 

.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 までご連絡ください。
前の記事：Float_html/css_WEB-ITnose についてどのくらい知っていますか?次の記事：Float_html/css_WEB-ITnose についてどのくらい知っていますか?

関連記事

続きを見る