Div con i bordi tagliati, di frontiera e sfondo trasparente

Question

Ho cercato di capire come fare una forma personalizzata in CSS che visivamente sarà simile a questa:

Con la proprietà di background:rgba(44, 44, 48, 0.9) e border:6px solid rgba(29, 30, 35, 0.9);

Il mio problema è che non riesco a trovare un modo per rendere il bordo in alto a destra e in basso a sinistra simile all'immagine che ho fornito. Ho provato i suggerimenti su CSS Custom Shape su CSS-Tricks ma non sembra che risolva il problema in quanto non può avere lo sfondo. Qualche idea?

Answer 1

Sfortunatamente non è possibile aggiungere uno pseudo-elemento a uno pseudoelemento (ad esempio, :after:after{} non funziona) - con una forma complessa come la tua, potrebbe essere necessario cheat a little e fare affidamento su pseudo-elementi dei relativi figli.

<div class="fancy-box"> 
    <h2>Title</h2> 
    <p>Content</p> 
</div> 

.fancy-box{/*container, top+bottom borders*/} 
.fancy-box:before{/*left-top "square" corner*/} 
.fancy-box:after{/*right-bottom "square" corner*/} 
.fancy-box>p:before{/*left-bottom "dog ear" border*/} 
.fancy-box>p:after{/*right-top "dog ear" border*/} 
.fancy-box>h2:before{{/*left-bottom "dog ear" background*/} 
.fancy-box>h2:after{/*right-top "dog ear" background*/} 

Anche in questo caso, this fiddle vi mostra come funzionerebbe con colori solidi (ragionevolmente bene, anche se non mi piacciono gli angoli "più sottili") - ma questo sarebbe fail when you apply opacity. La cosa migliore sarebbe probabilmente avere le "orecchie di cane" trasformate in PNG semitrasparenti pre-renderizzati, per un credito extra you could base64-encode them.

La "soluzione" di cui sopra è un orrore semantico completo però - potresti avere più fortuna nell'usare più sfondi con grafica pre-renderizzata.

Answer 2

Beh, penso che è necessario utilizzare più di un elements..I può sorta di raggiungimento di tale forma con tre elementi e 2 elementi pseudo .. Date un'occhiata qui http://codepen.io/zwongso/pen/vgxdB

Non è esattamente la stessa forma la tua immagine, ma dovresti avere l'idea .. per ottenere quel confine sarà un po 'complicato ..

Mi piacerebbe sapere se qualcuno ha una soluzione migliore.è un po' non semantico avere 2 elementi vuoti solo per scopi di presentazione.

Answer 3

Uno sfondo SVG potrebbe essere una buona soluzione, anche se potresti avere qualche problema con s upport. Vedi When can I use… SVG in CSS backgrounds. Inoltre, sono difficili da trovare qualsiasi cosa per funzionare correttamente. Se usi uno sfondo SVG, cerca sicuramente di inserirlo nel tuo CSS come URI di dati (vedi fiddle, anche attenzione a detto fiddle :-p).

Answer 4

Se si pensa in 3d, è possibile utilizzare le proprietà perspective e rotateX() per modificare solo uno o due angoli di un elemento.

Ciò consentirà di creare degli pseudo elementi del contenitore per dare loro la forma desiderata e ritagliare gli angoli in alto a destra e in basso a sinistra.

Si può anche dare i bordi desiderati alla forma, (vedere la seguente demo):

DEMO

uscita:

div { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 300px; 
 
    margin: 10% auto; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    border-top: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-bottom: 6px solid rgba(0, 0, 0, 0.8); 
 
} 
 
div:before, 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -6px; 
 
    width: 20%; 
 
    height: 100%; 
 
} 
 
div:before { 
 
    right: 100%; 
 
    background: inherit; 
 
    border-top: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-left: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-bottom: 6px solid rgba(0, 0, 0, 0.8); 
 
    -webkit-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: perspective(1px) rotateY(-0.15deg); 
 
    transform: perspective(1px) rotateY(-0.15deg); 
 
} 
 
div:after { 
 
    left: 100%; 
 
    border-top: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-right: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-bottom: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-left: none; 
 
    background: inherit; 
 
    -webkit-transform-origin: 0 100%; 
 
    transform-origin: 0 100%; 
 
    -webkit-transform: perspective(1px) rotateY(0.15deg); 
 
    transform: perspective(1px) rotateY(0.15deg); 
 
}

<div></div>

Answer 5

È possibile creare quella forma utilizzando un solo elemento, con semplici transforms e overflow: hidden; proprietà

È possibile aggiungere contenuti in un altro elemento:

body { 
 
    background: url(http://i.imgur.com/RT7XR3C.jpg); 
 
    background-size: cover; 
 
} 
 
div { 
 
    height: 200px; 
 
    width: 300px; 
 
    margin: 40px auto; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: -58px; /*-half buffer -left border*/ 
 
    height: 188px; 
 
    width: 400px; 
 
    background: rgba(30, 30, 30, 0.8); 
 
    -webkit-transform: skewX(45deg); 
 
    -moz-transform: skewX(45deg); 
 
    transform: skewX(45deg); 
 
    border-left: 8px solid #222; 
 
    border-right: 8px solid #222; 
 
    border-top: 6px solid #222; 
 
    border-bottom: 6px solid #222; 
 
} 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 157px; 
 
    width: 6px; 
 
    background: #222; 
 
    box-shadow:0 0 0 0 #222, 294px 43px 0 0 #222; 
 
}

<div></div>

FIDDLE

uscita:

Answer 6

Con CSS3, è possibile utilizzare border-image per raggiungere questo obiettivo. Io uso un inline-SVG qui, ma qualsiasi immagine avrebbe funzionato:

body { 
 
    background: url(http://i.imgur.com/RT7XR3C.jpg); 
 
    background-size: cover; 
 
} 
 
.fancy-box { 
 
    border-width: 50px; 
 
    border-image: url('data:image/svg+xml,<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><polygon stroke="rgba(29, 30, 35, 0.9)" stroke-width="6" fill="rgba(44, 44, 48, 0.9)" points="5,5 255,5 295,45 295,295 45,295 5,255 5,5"/></svg>') 50 50 repeat; 
 
    background: rgba(44, 44, 48, 0.9); 
 
    background-clip: content-box; 
 
    /* other styling */ 
 
    color: #D7DBE1; 
 
    text-align: justify; 
 
    font-family: sans-serif; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
}

<div class="fancy-box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec interdum velit. Morbi quis leo ac ipsum volutpat imperdiet. Sed feugiat posuere nisl sit amet luctus. 
 
</div>