0
193
VisualizaçõesCómo usar la propiedad de transformación en css para obtener la línea de borde
Imagen de requisito
Mi imagen
Una vez que mire estas 2 imágenes, la imagen de requisito es lo que necesito y Mi imagen es lo que obtuve la salida. Necesito la salida como imagen de requisito. yo con la solucion en stackblitz
.psudo:after{ content:""; position:absolute; border-width:92px; border-style:solid; border-color:#fff; border-right-color:transparent; border-left-color:transparent; border-bottom-color:transparent; z-index:99; top:0; right:0; transform:translateX(90px) } <div class="psudo" style="width:300px; height:80px; position:relative; background-color:#5f7dff;"> <h6 class="name">Customer</h6> </div>3 Respostas
Responde à pergunta0
Una alternativa, y en aras de la exhaustividad, sin utilizar el código fuente inicial, que sería más adecuada para las necesidades de respuesta (móvil, escritorio, tableta, etc.) sería simplemente crear un polígono azul con la forma que necesita, e inserte ese polígono dentro de un contenedor flexible junto con el ícono SVG. Eso me parece una solución más limpia. Puede usar este sitio web para crear polígonos CSS: https://bennettfeely.com/clippy/
div { display:flex; width:400px; justify-content:space-between; height:85px; border:1px solid #5D7AFC; /* you can add a border to the div element like this */ } span { clip-path: polygon(0 0, 59% 0, 100% 100%, 0% 100%); background:#5D7AFC; width:75%;height:100%; color:#FFF;display:flex;align-items:center;justify-content:flex-start; } span > span { margin-left:15%; } img { width:75px; } <div> <span> <span>Customer</span> </span> <img src="https://laurentchevrette.digital/tmp/some-icon.png"> </div>0
ahí lo tienes... aquí está la solución completa que hice, simplemente reemplaza el contenido de intervalo dentro de la clase llamada 'icono' con el icono que desees.
https://stackblitz.com/edit/web-platform-kgeqeh?file=index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> html, body { margin: 0; padding: 0; box-sizing: border-box; } .box { /* width: 40%; */ border: 1px solid #5f7dff; overflow: hidden; width: 300px; height: 80px; display: flex; justify-content: space-between; } .customer { align-items: center; background-color: #5f7dff; display: inline-flex; position: relative; padding: 0 20px; } .customer::after { content: ''; position: absolute; right: -80px; top: 0; width: 0; height: 0; border-bottom: 116px solid #5f7dff; border-right: 80px solid transparent; } .icon { display: flex; align-items: center; padding-right: 20px; } </style> </head> <body> <div class="box"> <div class="customer"> <span>Customer</span> </div> <div class="icon"> <span>icon</span> </div> </div> </body> </html>0
.container { display:flex; /*You can use flex positioning */ width:330px; /*set desired total width here */ justify-content:space-between; } .container img { width:70px;height:70px; z-index:10; } .pseudo { width:300px; height:80px; position:relative; background-color:#5f7dff; } .pseudo:after{ content:""; position:absolute; border-width:92px; border-style:solid; border-color:#fff; border-right-color:transparent; border-left-color:transparent; border-bottom-color:transparent; z-index:9; top:0; right:0; transform:translateX(90px) } <div class="container"> <!-- insert the 'shape' and the icon (SVG,PNG,etc.) inside that same container --> <div class="pseudo"> <h6 class="name">Customer</h6> </div> <img src="https://laurentchevrette.digital/tmp/some-icon.png"> </div>