0
220
ViewsCrear un radio de borde invertido y una sombra de cuadro juntos
Quiero crear un radio de borde invertido similar a:
Sin embargo, está siendo difícil crearlo debido a box-shadow . He probado muchas soluciones, como usar box-shadow o el filtro drop-shadow con clip-path sin buenos resultados.
Estoy en este punto:
body { height: 100vh; display: grid; place-items: center; margin: 0; background: white; } .wrapper { width: 100%; //filter: drop-shadow(0 0 2rem #0000005c); } .header { background-color: #efefef; width: 85%; aspect-ratio: 16/3; border-radius: 1.5rem; border: 1px solid #d0d0d0; box-shadow: 0 0 2rem #0000005c; position: relative; margin: 0 auto; //clip-path: url(#myClip); } .dashed { width: 100%; position: absolute; top: 50%; border-bottom: 1px dashed black; } .dashed:after { content: ''; position: absolute; width: 8rem; height: 4rem; background: white; left: -7rem; top: -2rem; border-radius: 0 2rem 2rem 0; box-shadow: 0 0 2rem #0000005c inset; clip-path: inset(0 0 0 80%); } <div class="wrapper"> <div class="header"> <div class="dashed"></div> </div> </div> <!-- <svg width="0" height="0"> <defs> <clipPath id="myClip"> <circle cx="50" cy="50" r="50" /> <rect width = "10000" height = "10000" </clipPath> </defs> </svg> --> Intenté usar un svg con múltiples clip-path para hacer referencia a él también en el css .
Imagen original completa:
2 answers
Answer question0
Esta es una forma de hacerlo: para los agujeros al principio y al final del boleto, puede usar los elementos antes y después. Ambos pseudo elementos son transparentes con una gran sombra de caja blanca: box-shadow: 0px 0px 1px 50vw white; . Dado que el elemento .discontinuado tiene overflow:hidden , verá la sombra del cuadro de los pseudoelementos solo dentro del .discontinuado y se verá como si el .discontinuado tuviera un fondo blanco.
Para la sombra exterior, ahora puede usar un filtro de sombra paralela como pretendía.
body{background:silver} .dashed { width: 90%; height:200px; position: absolute; margin: auto; top: 0; bottom:0; left:0;right:0; overflow:hidden; min-width:250px; filter: drop-shadow(0 0 2rem black); } .dashed:before,.dashed:after{ content:""; display:inline-block; width:100px; height:100px; background:none; border-radius:50%; position:absolute; box-shadow: 0px 0px 1px 50vw white; } .dashed:before{ left:-50px; top:50px; } .dashed:after{ left:calc(100% - 50px); top:50px; } <div class="dashed"></div>0
Puede usar un código reducido considerando la coloración del degradado:
body { background: silver } .dashed { width: 90%; height: 200px; margin: 50px auto; min-width: 250px; background: radial-gradient(50px at left , #0000 98%, #fff) left, radial-gradient(50px at right, #0000 98%, #fff) right; background-size: 51% 100%; background-repeat: no-repeat; filter: drop-shadow(0 0 2rem black); } <div class="dashed"></div>