Tracer un segment oblique

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:

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:

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