Div con bordes cortados, frontera y fondo transparente

Question

He estado tratando de averiguar cómo hacer que una forma personalizada en CSS que visualmente se verá así:

Con la propiedad de background:rgba(44, 44, 48, 0.9) y border:6px solid rgba(29, 30, 35, 0.9);

Mi problema es que no puedo encontrar una manera de hacer que los bordes superior derecho e inferior izquierdo se parezcan a la imagen que proporcioné. Intenté los consejos sobre CSS Custom Shape en CSS-Tricks pero parece que no resuelve el problema ya que no puede tener fondo. ¿Algunas ideas?

Answer 1

Desafortunadamente no puede tener un pseudo-elemento agregado a un pseudo-elemento (es decir, :after:after{} no funcionará): con una forma compleja como la suya, puede tener que cheat a little y depender de los pseudo-elementos de sus hijos.

<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*/} 

Una vez más, this fiddle que muestra cómo funcionaría con colores sólidos (razonablemente bien, aunque no me gustan los ángulos "delgados") - pero esto fail when you apply opacity. Lo mejor será tener alrededor de tener "orejas de perro" en PNG semitransparentes pretratados, para obtener crédito adicional you could base64-encode them.

La "solución" de arriba es un completo horror semántico: puede que tenga más suerte al usar fondos múltiples con gráficos renderizados previamente.

Answer 2

Bueno, creo que es necesario utilizar más de un tipo de elements..I puede lograr que forma con tres elementos y pseudo elementos 2 .. Tener una mirada en ella aquí http://codepen.io/zwongso/pen/vgxdB

No es exactamente la misma forma como tu imagen, pero debes tener la idea ... para obtener ese borde será un poco complicado aunque ...

Me gustaría saber si alguien tiene una mejor solución ... es un poco no semántica tener 2 elementos vacíos solo para fines de presentación.

Answer 3

Un fondo SVG puede ser una buena solución, aunque es posible que tenga problemas con s upport. Ver When can I use… SVG in CSS backgrounds. Además, son complicados para que todo funcione correctamente. Si utilizas un fondo SVG, definitivamente busca incluirlo en tu CSS como un URI de datos (ver fiddle, también prestar atención en dicho violín :-p).

Answer 4

Si piensa en 3D, puede usar las propiedades perspective y rotateX() para modificar solo uno o dos ángulos de un elemento.

Esto le permitirá diseñar pseudo elementos del contenedor para darles la forma deseada y recortar las esquinas superior derecha e inferior izquierda.

También puede dar a las fronteras deseados en la forma, (véase la siguiente demo):

DEMO

Salida:

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

Puede crear esa forma mediante el uso de un solo elemento, con simples transforms y overflow: hidden; propiedades

Puede agregar contenido en otro 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

Salida:

Answer 6

Con CSS3, puede utilizar border-image para lograrlo. Yo uso un inline-SVG aquí, pero cualquier imagen trabajaría:

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>