WebCssDesign

Coins arrondis CSS

• Accueil
• Css
• Coins arrondis CSS

Voici une exemple parmi tant d’autres de coins arrondis en CSS. Celui-ci s’utilise avec un pixel et a pour avantage de ne pas utiliser d’images donc d’être très léger.

Cet effet un pixel donne l’impression de coin arrondis mais ce n’est pas vraiment une courbe très arrondis, l’on retrouve cet effet dans Google Analytics.

Donc pas d’images d’arrière-plan mais plutôt un jeu de tags <b> choisit pour sa longueur égale à une lettre

<ul>
  <li>
    <a href="/">
      <b>
        <b>
            Visitors
        </b>
      </b>
    </a>
  </li>
</ul>

CSS

li a {
  display:block; /* a must */
  border: solid #666;
  border-width: 0 1px; /* left and right borders only */
  text-decoration: none;
  outline:none; /* so as not to distract from the effect */
  color: #000;
  background: #e4e4e4;
}
li a b {
  display: block; /* another must */
  position:relative; /* because the child elements are positioned */
  top: -1px; /* drag it up a little, creates the top notches */
  left: 0;
  border:solid #666;
  border-width:1px 0 0; /* top border only */
  font-weight:normal;
}
li a b b {
  border-width:0 0 1px; /* bottom border only */
  top: 2px; /* pushed down a little to create the bottom notches */
}
li a b b b { /* i don't think three-deep tag is even necessary */
  top:-1px;
  padding: 1px 6px;
  border-width: 0;
}

Cela est donc assez intéressant pour le noter si vous avez besoin d’arrondir légèrement les angles de vos menus
ou divs.
Un exemple sur cette page