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