Bonjour je souhaite pouvoir réaliser les éléments qui sont marqués en rouge.J'ai essayer avec border et box shadow mais je n'obtient pas le résultat que je voudrai

 <div class="carre-contenu">        
        <p>Photographe depuis plus de 5 ans, je réalise des reportages aux photos dynamiques et pertinentes 
           pour vos projets de communication. Créativité, qualité, et sérénité pour vous ! Je gère tout, 
           depuis la direction artistique,la réalisation du reportage, jusqu'à la livraison de vos photos retouchées, 
           prêtes à l'emploi.
        </p>
        <h2>Services</h2>
        <ul>
           <li> Portrait seul ou à plusieurs    </li>
           <li> Shooting mode                   </li>
           <li> Retouches sur mesure            </li>             
           <li> Développement.                  </li>
        </ul>       
        </div>
        <div>
            <a href="Portfolio_2.html" class="cta">VOIR MON PORTFOLIO</a>
        </div> 

.carre-contenu
{     
    border-right:1px solid #8e86b5;
    border-bottom: 1px solid #8e86b5;
    padding:50px;    
    width: 50%;
    margin: auto;        
}

Bonjour.

J'ai peut-être une solution.

Pour que ça fonctionne, il faudra ajouter à la classe carre-contenu la déclaration position: relative;

Tu places dans ta div une autre div vide que tu règles de cette manière

{
  border-right: 2px solid #6C75A9;
  border-bottom: 2px solid #6C75A9;
  background-color:#0000;
  height: 250px;
  width: 400px;
  position: absolute;
  bottom: -2px;
  right: -2px;
}

Tu ajustes en fonction du résultat voulu.

-
Edité par Domi65 25 août 2023 à 18:48:13