Border Radius - Colore esterno

**Freedom** · 29-08-2014, 12:19

Ciao a tutti!

Ho un problema con un box con "box radius".

Vorrei sapere se esiste un modo per impostare un colore al di sfondo al di fuori del "box", cioè fuori dagli angoli. Vedi esempio.

Grazie in anticipo!Immagine5.png

**Prill** · 29-08-2014, 21:04

Puoi inserire il tutto in un div che abbia quel colore di sfondo, restando al suo interno il box con gli angoli arrotondati

**KillerWorm** · 30-08-2014, 02:07

Ciao, è valido quanto indicato da Prill ma ti indico una diversa soluzione con l'uso del pseudo-elemento :after (::after) o :before (::before), o combinati entrambe, per creare ulteriore grafica senza dover usare elementi aggiuntivi come contenitore.

Posto un po' di codice con qualche esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      body{
        background-color:Grey;
      }
      
      #div1{
        position:relative;
          border: 2px solid Red;
        border-radius: 25px;
        background-color:White;
        padding:10px;
        margin:40px;
      }
      #div1:before{
        content:"";
        position:absolute;
        top:-7px; bottom:-7px; left:-7px; right:-7px;
        z-index:-1;
        background-color:Yellow;
      }
      
      #div2{
        position:relative;
          border: 2px solid Grey;
        border-radius: 25px 0 0 0;
        background-color:White;
        padding:10px;
        margin:40px;
      }
      #div2:before{
        content:"";
        position:absolute;
        top:0; bottom:0; left:0; right:0;
        z-index:-1;
        background-color:White;
      }
      
      #div3{
        position:relative;
          border: 4px solid Grey;
        border-radius: 30px 0 30px 0;
        background-color:White;
        padding:10px;
        margin:40px;
      }
      #div3:before{
        content:"";
        position:absolute;
        top:-4px; bottom:-4px; left:0; right:0;
        z-index:-1;
        background-color:Lime;
          border:solid Grey;
        border-width:4px 0;
        
      }
      #div3:after{
        content:"";
        position:absolute;
        top:-10px; bottom:-10px; left:0; right:0;
        z-index:-2;
        background-color:Silver;
      }
    </style>
  </head>
  <body>
    <div id="div1">Lorem ipsum</div>
    <div id="div2">Duis aute irure dolor in reprehenderit</div>
    <div id="div3">Excepteur sint occaecat cupidatat non proident</div>
  </body>
</html>

Discussione: Border Radius - Colore esterno

Strumenti discussione

Ricerca discussione

Visualizza

Border Radius - Colore esterno

Tag per questa discussione

Permessi di invio