28112 sujets

CSS et mise en forme, CSS3

[Résolu] Forme en css

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 :
.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)
Modérateur
Salut,

Tu peux utiliser les pseudo éléments ::before et ::after pour faire ça et les positionner en absolute :

.triangle-right::before {
  content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 0;
    border-top: 50px solid rgb(66, 66, 66);
    border-right: 50px solid transparent;
}

https://jsfiddle.net/undless/c7gh26t4/

Pour faire des boules il suffit de donner la même hauteur et largeur a une div et de mettre un border-radius a 50%

Bonne soirée !
Meilleure solution
Sujet clos
Aller à