Forum : Aide css

Réponse acceptée

Tu peux faire quelque chose comme ceci
Aperçu : http://jsfiddle.net/7sL5t/

HTML

<div class="bloc">
    <div class="bloc-border"></div>
</div>

CSS

.bloc
{
    position: relative;

    width: 35px;
    height: 80px;

    border: 1px solid #000;
}

.bloc-border
{
    display: block;
    position: absolute;

    width: 35px;
    height: 50px; 
    margin: -1px 0 0 -1px;

    border: 1px solid transparent;
    border-bottom: 1px solid #000;
    border-radius: 0 0 0 50px;
}

.bloc:before
{
    content: '';

    display: block;
    position: absolute;

    width: 35px;
    height: 50px; 
    margin: -1px 0 0 -1px;

    border: 1px solid #fff;
    border-radius: 0 0 0 50px;
}

jo-jo-123

As tu essayé un border-radius ?

Cuxtos

Auteur

oui, le problème du border-raduis est qu'il ne permet pas de de réaliser des bordure vers l’intérieur ,
c'est la forme blanche que j'aimerais bien qu'il suive mon trait bleu.

jo-jo-123

tu pourrais mettre une image de l aperçu final souhaité ?

Cuxtos

Auteur

Quel que choses dans le genre ,

désoler je suis pas très bon en photoshop.

Arrows78

A part faire du bidouillage, ce n'est pas possible directement avec une propriété CSS.
Mais le plus simple et plus rapide, c'est encore de crée une image avec la bordure que tu souhaite plutôt que de mettre beaucoup trop de ligne CSS pour une simple bordure de ce genre.

Après si vraiment tu veux mettre du CSS, je sais pas pas mal de personne qui ont souhaité faire ça sont passé par la création de rond sur les coins, puis border-radius: 50% et enfin, changer la couleur pour plus voir le reste du cercle. Mais encore une fois, cela reste du bidouillage.

Vallyan

@Arrows78: Ton commentaire sur le fait que c'est pas possible de faire cela en css arrive 3h après la brillante démonstration de
jo-jo-123 qui le fait en css ^^

La programmation c'est un eternel bidouillage, ceux qui veulent aller un peu plus loin que les quelques fonctions de base a leur disposition font avec les moyens du bord, et ceci est un excellent exemple.

GG, Jo-jo, btw.

jo-jo-123

Merci Vallyan :)

Cuxtos

Auteur

merci de ta réponce Jo-Jo-123 ,
et je suis de ton avis Vallyan.

Aide css

9 réponses