recherche

Maison >interface Web >tutoriel HTML >纯CSS实现箭头，圆点， 三角形。_html/css_WEB-ITnose

纯CSS实现箭头，圆点， 三角形。_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-21 08:52:491773parcourir

箭头：

.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;    }

 


圆点：

  .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%;    }


三角形：

.triangle {      position: absolute;      top: 16px;      right: 18px;      border: 6px solid transparent;      border-top: 6px solid #123456;    }

 

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Float知多少_html/css_WEB-ITnoseArticle suivant：Selectors API_html/css_WEB-ITnose

Articles Liés

Voir plus