Bonjour,
Pour un exercice je dois reproduire ce CV : https://cms-assets.tutsplus.com/uploads/users/1223/posts/33877/image/Decent.jpg mais je bloque sur les box des expériences.
Je n'arrive pas à réaliser les petits triangles rectangles à coté des titres.
J'ai trouvé une manière d'en réaliser mais je n'arrive pas à les coller avec ma box.
Voici le code pour ce triangle :
Voici mon html :
Le css :
Mon code n'est surement pas très beau et la div du triangle n'est pas dans mon code car je n'ai pas trouvé comment la placer.
Si quelqu'un à une solution elle est la bienvenue et au passage si vous savez comment faire la barre avec les ronds du milieu je suis preneur.
Merci,
Bonne soirée
Modifié par JMMO (08 May 2022 - 10:13)
Pour un exercice je dois reproduire ce CV : https://cms-assets.tutsplus.com/uploads/users/1223/posts/33877/image/Decent.jpg mais je bloque sur les box des expériences.
Je n'arrive pas à réaliser les petits triangles rectangles à coté des titres.
J'ai trouvé une manière d'en réaliser mais je n'arrive pas à les coller avec ma box.
Voici le code pour ce triangle :
.triangle {
width : 0;
height : 0;
border-top : 50px solid rgb(66, 66, 66);
border-right : 50px solid transparent;
}
Voici mon html :
<div class="experience">
<h2> EXPERIENCE</h2>
<div class="exp_1">
<div class="bandeau_noir">
<h3> Lorem Ipsum </h3>
</div>
<div class="exp_1_content box">
<b> ................................</b> <br>
<b> 2017</b>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
Le css :
.experience {
position: relative;
margin-top: 6%;
left: 10%;
width : 80%;
margin-bottom: 20%;
text-align: left;
font-family: 'Comic Sans MS', cursive;
}
.experience h2 {
text-align: center;
}
.exp_1{
position: absolute;
width :28%;
left : 10%;
margin-top : 5%;
background-color :rgb(243, 243, 243);
}
.exp_1_content{
padding : 20px;
border: ridge rgb(224, 224, 224);
border-top-style : none ;
border-left: none;
box-shadow : 6px 6px 3px rgb(219, 217, 217);
}
.exp_1 .bandeau_noir{
background-color: rgb(66, 66, 66);
color: white;
padding : 3px;
}
Mon code n'est surement pas très beau et la div du triangle n'est pas dans mon code car je n'ai pas trouvé comment la placer.
Si quelqu'un à une solution elle est la bienvenue et au passage si vous savez comment faire la barre avec les ronds du milieu je suis preneur.
Merci,
Bonne soirée
Modifié par JMMO (08 May 2022 - 10:13)