Angles coupés ?

[Siiicreete]

Bonsoir,

J'aurai voulu savoir s'il était possible -comme les angles arrondis avec le radius- d'avoir des angles coupés.
Comme ceci :

Spoiler:

Cordialement,

[Tech]

Bonjour,

Il n'existe pas de façon "propre" de le faire mais j'ai trouvé ce lien : http://www.journaldunet.com/developpeur/tutoriel/css/051206-css-boite-bordure-arrondi.shtml
A vous de voir.

Cordialement.

[Siiicreete]

Bonjour,

Merci de votre réponse. J'aurai une question : si j'ajoute cela à mon CSS, tous les angles seront de cette façon ? Ou je peux les mettre que pour certains cadre ?

[Tech]

Il suffit de faire une class spécifique aux angles dont vous désirez qu'ils soient coupés.

Cordialement.

[Siiicreete]

Je devrais simplement remolacer les .angle par autre chose ?

[Tech]

Oui.

Cordialement.

[Siiicreete]

Très bien merci.

Cordialement,

[Tech]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif

[Siiicreete]

Bonjour !

J'ai essayé ce que vous m'aviez proposé mais je n'ai pas réussi. Je ne sais pas quelle balise faire avec le CSS j'ai essayé <div class="angle"> / <div class="angle .b1"> / <div class="angle"><span class="b1"> mais rien ne marche.
Auriez-vous une réponse ?

Cordialement,

[angelsjenifer]

Bonjour, je vous invite à essayer comme ceci

DIV :

Code:

<div class="angle">... TEXTE ...</div>

CSS :

Code:

.angle{
-moz-border-radius: 28px;
-khtml-border-radius: 28px;
-webkit-border-radius: 28px;
border-radius: 28px;
}

[Siiicreete]

Bonjour,

Malheureusement ça ne marche pas. Auriez-vous autre chose à me proposer ?

[angelsjenifer]

Qu'est ce qui ne fonctionne pas ??

Car le code est correct et fonctionne. Puis-je voir vos codes ?

[Siiicreete]

En réalité, j'ai mis la balise dans le template overall_header :

Code:

<table style="margin-left: 15%; margin-righ: 15%; margin-top: -10px"><tr><td><div class="angle"><div class="navig" align="center">{GENERATED_NAV_BAR}</div></div></td></tr></table>

et dans le CSS :

Code:

a.mainmenu {
 text-shadow: 0px 0px 1px #CB3030;
font-family: 'Graduate', cursive;
letter-spacing: 0px;
color: #CB3030;
  text-align:center;
padding-right: 10px;
font-size: 12px;
  text-transform: lowercase;
}

a.mainmenu:hover {
text-align: center;
font-color: #F3CEB2;
text-transform:uppercase;
letter-spacing: 0.7px;

}
 .navig {
        position: fixed;
        width: 70%;
background-color:#F0EDED;
border: 3px solid #741414;}

.angle .b1, .angle .b2, .angle .b3, .angle .b4, .angle .b5 {
  display:block;
  overflow:hidden;
  height:1px;
  background:#741414;
  border-left:1px solid #000;
  border-right:1px solid #000;
  }

.angle .b1 {margin:0 5px; background:#000;}
.angle .b2 {margin:0 4px;}
.angle .b3 {margin:0 3px;}
.angle .b4 {margin:0 2px;}
.angle .b5 {margin:0 1px;}

        .angle{
        -moz-border-radius: 28px;
        -khtml-border-radius: 28px;
        -webkit-border-radius: 28px;
        border-radius: 28px;
        }

[angelsjenifer]

ah ok, alors il faut enlever tout les " angle " indiqué s'ils ne te servaient que pour ça et ne garder que ça :

Code:

<table style="margin-left: 15%; margin-righ: 15%; margin-top: -10px"><tr><td><div class="navig" align="center">{GENERATED_NAV_BAR}</div></td></tr></table>

Code:

a.mainmenu {
text-shadow: 0px 0px 1px #CB3030;
font-family: 'Graduate', cursive;
letter-spacing: 0px;
color: #CB3030;
text-align:center;
padding-right: 10px;
font-size: 12px;
text-transform: lowercase;
}
       
a.mainmenu:hover {
text-align: center;
font-color: #F3CEB2;
text-transform:uppercase;
letter-spacing: 0.7px;
}

.navig {
position: fixed;
width: 70%;
background-color:#F0EDED;
border: 3px solid #741414;
}

Si ça ne fonctionne toujours pas, essayez de déplacer ce code dans le a.mainmenu :

Code:

-moz-border-radius: 28px;
-khtml-border-radius: 28px;
-webkit-border-radius: 28px;
border-radius: 28px;

[Siiicreete]

Mais si je rajoute cela, les angles ne seront pas arrondis ?

[Scoubifitz]

bonsoir,

c'est pour entourer la barre de navigation ?

pour le template :

Code:

<table style="width: 80%;margin:0 auto;">
  <tr>
    <td>
      <div class="angle">
        <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
        <div class="boxcontent">
          <div class="navig" align="center">
            {GENERATED_NAV_BAR}
          </div>
        </div>
        <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
      </div>
    </td>
  </tr>
</table>

le CSS qui l'accompagne :

Code:

a.mainmenu {
  text-shadow: 0px 0px 1px #CB3030;
  font-family: 'Graduate', cursive;
  letter-spacing: 0px;
  color: #CB3030;
  text-align:center;
  padding-right: 10px;
  font-size: 12px;
  text-transform: lowercase;
}

a.mainmenu:hover {
  text-align: center;
  color: #F3CEB2;
  text-transform:uppercase;
  letter-spacing: 0.7px;
}

/* angle Borders*/
.angle {
  background: transparent;
  width:80%;
  margin:0 auto;
}
.angle .top, .angle .bottom {
  display:block;
  background:transparent;
  font-size:1px;
}
.angle .b1, .angle .b2, .angle .b3, .angle .b4, .angle .b5 {
  display:block;
  overflow:hidden;
  height:1px;
  background:#eca;
  border-left:1px solid #000;
  border-right:1px solid #000;
}
.angle .b1 {margin:0 5px; background:#000;}
.angle .b2 {margin:0 4px;}
.angle .b3 {margin:0 3px;}
.angle .b4 {margin:0 2px;}
.angle .b5 {margin:0 1px;}
.angle .boxcontent {
  display:block;
  background:#eca;
  border-left:1px solid #000;
  border-right:1px solid #000;
}

[Siiicreete]

Bonjour à vous,

J'ai essayé les différentes méthodes. La dernière proposée a été la plus concluante et pourtant elle ne me satisfait pas.
Cela ne correspond pas à l'idée que je m'étais fait. Donc j'abandonne ça.

Merci à tous.