Tracer une forme div avec du css

Bonjour tout le monde,

J'utilise Wordpress et pour mon design j'ai créer des vignettes article avec un design genre ticket billetterie avec un rognage en demi cercle au centre. J'aimerais faire ce design en full css avec une div et une "image à la une" charger à l’intérieur avec un overflow hidden qui rogne cette parti.

Avez vous des idées ?

<div id='wrapper'>
      <article>  </article>
</div>

#wrapper{
background: ta couleur;
}
article{
overflow:hidden;
background: ton image;
z-index:1;
}
article:before{
content:'';
z-index:2;
display:block;
position:absolute;
gerer la poz
width: 100px; height: 100px; 
background: meme couleur que ton #wrapper; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px;

?
Modifié par Dqni_Bodi (01 Mar 2013 - 11:56)

Oui j'y avais pensé de superposer une div pour cacher ce demi cercle mais la background s'apparente à du papier canson j'ai peur que cela ce remarque. N'y a t'il pas la possibilité de choisir dans une superposition de cacher tous sauf le background body ?

mais merci pour ta piste !

Salut,

En CSS tu trouveras -webkit-mask (support plus que faible côté browsers).
Sinon, il y a aussi un element <mask> en SVG qui devrait faire l'affaire !

tm

Super, option mask à l'air de donner de bon résultat.

voici un lien que je viens de trouver pour compléter ce post

http://www.cssbakery.com/2009/06/background-image.html

Je posterais mon propre code après avoir étudier ça.