0

Estoy tratando de crear lo siguiente con CSS o JS, alguno tiene idea de como podría hacerlo? Lo mas importante es el corte en la primera letra.

introducir la descripción de la imagen aquí

De momento estoy en blanco. Pensé que podría con pseudo-elementos... y aplicar clip-path pero no lo he logrado.

1
  • Sería ideal que añadieras el código con lo que hayas intentado (al menos el HTML). De ese modo, si hubiera algún error, podríamos ayudarte directamente con eso. Lee sobre cómo crear un ejemplo mínimo verificable y completa el recorrido de bienvenida para más información.
    – Alvaro Montoro
    el 21 abr. 2020 a las 22:07

1 respuesta 1

3

hice un ejemplo de lo que necesitas, podrías orientarte a partir del ejemplo:

(No es exactamente como tu lo quieres pero es un ejemplo parecido)

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<style>
	.box {
		padding: 1rem;
		margin: 3rem;
		background-color: #2222;
		font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
	}

	.mask {
		clip-path: polygon(100% 0%, 2% 0%, 0% 100%, 100% 100%);
	}
</style>

<body>

	<div class="box">
		<p class="mask">CONCEPTE</p>
		<p class="mask">TIPOGRAFIES</p>
		<p class="mask">RECURSOS GRÁFICS</p>
		<p class="mask">APLICACIONS</p>
	</div>

</body>

</html>

1
  • 1
    Es exacto lo que necesitaba... un acercamiento de como trabajarlo con ya que no se me ocurria con clip-path y con las "mask". Con esto ya puedo trabajarlo y expandirlo. Gracias por la respuesta.
    – GermanCB
    el 21 abr. 2020 a las 12:32

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.