Discussion :

[merou19]

Bonjour à tous,

J'ai besoin de votre aide pour un bout de css où je ne m'en sors pas !

Dans un site avec Bootstrap, j'ai un div avec les 4 coins arrondis.
Et dans le coin haut droit, je veux mettre un triangle avec un message à 45 degrés, triangle avec son coin arrondi, ce que je n'arrive pas à faire.

Je me suis fortement inspiré de l'exemple ici : http://jsfiddle.net/o6y997ds/
Qui fait ce que je veux, mais dans le coin haut gauche.

mon html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="contenu-bloc-produit">
	<div class="relative">
		<div class="badge-corner-radius">
			<div class="badge-corner">
				<span class="rotation">Stock épuisé</span>
			</div>
		</div>
	</div>
</div>

Test 1 : J'ai le triangle, mais pas le coin arrondi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.contenu-bloc-produit {
    padding: 0.25rem;
    background-color: #fdebd0;
    border: 1px solid gainsboro;
    border-radius: 0.5em;
}
 
.badge-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 0 0 100px;
    border-color: rgba(0, 0, 0, 0.3) transparent transparent transparent;
    border-radius: 0px 0px 0px 0px;
}
 
.badge-corner-radius {
    border-radius: 0px 10px 0px 0px !important;
    overflow: hidden;
}
 
.badge-corner span {
    position: absolute;
    top: -95px;
    left: -50px;
    font-size: 16px;
    color: #fff;
}
 
.rotation {
    transform: rotate(45deg);
    font-weight: bold;
    top: 20px;
    right: 20px;
}

Test 2 : j'ai le coin arrondi en haut à droite, mais un carré, au lieu d'un triangle
Je n'ai modifié dans la classe badge-corner que les 2 lignes suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.badge-corner {
	// ...
    border-color: rgba(0, 0, 0, 0.3) transparent rgba(0, 0, 0, 0.3) transparent;
    border-radius: 0px 10px 0px 0px;
}

Merci d'avance pour votre aide !

[merou19]

Bon, j'ai fini par obtenir ce que je veux.
Je me suis basé sur cet exemple : http://jsfiddle.net/u8euZ/1

Merci à ceux qui sont passés sur mon sujet :-)