Tracer un segment oblique

**aertys** · 01/01/2020, 19h34

Bonjour à tous et bonne année 2020,

je cherche à reproduire une forme en html
pour l'instant j'ai réussi à reproduire sur ma page un bouclier mais voilà je voudrais y ajouter 2 épées qui s'entrecroisent sur le centre du bouclier.
d'où l'idée de tracer un segment oblique ; comme j'ai vu sur internet il est possible de dessiner un triangle mais comment faire pour pencher la base de ce triangle ?

voici mon code html :

Code html :

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
<body>
  <div class="barre"></div>
</body>
 
<style>
body {
  background: #2C2C2C;
  margin:0;
  padding:0;
}
.barre {
  position:absolute;
  top:40%;
  width:100%;
  height:50px;
  -webkit-transform: skew(0deg, 20deg);
  -moz-transform: skew(0deg, 20deg);
  -o-transform: skew(0deg, 20deg);
  transform: skew(0deg, 20deg);
  border-top:10px solid red;
  border-bottom:50px solid #191919;
}
 
</style>

pour mes épées j'aimerai réaliser une forme simple : j'aimerai faire un triangle isocèle pour faire la pointe en haut et ensuite un simple rectangle pour le reste de la lame.
Le pommeau sera fait ensuite le plus simplement possible.
notez que je suis pret à utiliser PHP si nécessaire.

Merci beaucoup

Invité · 02/01/2020, 10h18

Bonjour,

1- Une solution est de :

mettre la pointe, la lame, la garde et le pommeau dans un div conteneur
les styler comme tu veux
effectuer la rotation uniquement sur le div conteneur

exemple : https://codepen.io/jreaux62/pen/abzLgpM

Code html :

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
<!-- modele -->
  <div class="epee">
    <div class="lame"></div>
    <div class="garde"></div>
    <div class="pommeau"></div>
  </div>
 
<!-- ecusson avec 2 epees -->
<div id="ecusson">
  <div id="epee1" class="epee">
    <div class="lame"></div>
    <div class="garde"></div>
    <div class="pommeau"></div>
  </div>
  <div id="epee2" class="epee">
    <div class="lame"></div>
    <div class="garde"></div>
    <div class="pommeau"></div>
  </div>
</div>

Code css :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/* Epées */
.epee{
  position:absolute;
  height:400px;
  width:90px;
  margin:0 auto;
}
.epee:before{ /* pointe */
  position:absolute;
  display:block;
  content:'';
  left:30px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 20px 15px;
  border-color: transparent transparent #888 transparent;
}
.lame{
  position:absolute;
  height:270px;
  left:30px;
  top:20px;
  background:#ccc;
  width:0px; border:15px inset #ccc; /* astuce */
}
.garde{
  position:absolute;
  left:0;
  top:300px;
  border-radius:5px;
  background:#4b312b; /* marron */
  border:1px solid black;
  width:80px; height:10px; border:5px inset #4b312b; /* marron */
}
.pommeau{
  position:absolute;
  height:80px;
  left:30px;
  top:320px;
  border-radius:0 0 15px 15px;
  background:#4b312b; /* marron */
  width:10px; border:10px inset #4b312b; /* marron */
}
/* ------------ */
/* Ecusson */
#ecusson{
  position:relative;
  height:450px;
  width:400px;
  margin:30px auto;
  background:darkred;
  border:20px ridge black;
  border-bottom-left-radius: 300px 250px;
  border-bottom-right-radius: 300px 250px;
  overflow:hidden;
}
#ecusson:before{
  position:absolute;
  display:block;
  content:'';
  height:450px;
  width:180px;
  top:0;
  left:110px;
  background:orange;
}
/* ------------ */
/* Epées sur Ecusson */
#epee1{
  position:absolute;
  top:0;
  left:150px;
  transform:rotate(45deg);  
}
#epee2{
  position:absolute;
  top:0;
  left:160px;
  transform:rotate(-45deg);  
}
/* ----------- */
/* Torsion */
#ecusson{
  transform: skew(0deg, 5deg);
}

2- Une autre est de faire le dessin en svg

Tracer un segment oblique

CSS

Vue hybride

Discussions similaires

Partager

Partager