Skip to content

Instantly share code, notes, and snippets.

@Tsukina-7mochi

Tsukina-7mochi/kanzenrikai.css

Last active June 17, 2024 07:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Tsukina-7mochi/1484fe06bcc890af25198b446bee54de to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Tsukina-7mochi/1484fe06bcc890af25198b446bee54de to your computer and use it in GitHub Desktop.
Download ZIP
How you perfetly understand CSS. CSS を完全に理解する方法
Raw
kanzenrikai.css
p.kanzenrikai {
width: fit-content;
position: relative;
padding: 1em;
transform: translateX(var(--kanzenrikai-shift, 25%));
}
p.kanzenrikai::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
border-radius: 0.5em;
transform: translateX(calc(var(--kanzenrikai-shift, 25%) * -1));
}
Raw
kanzenrikai.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://gist.githubusercontent.com/Tsukina-7mochi/1484fe06bcc890af25198b446bee54de/raw/c9f1084122b505707de6479f9e09f9addf08fbdd/kanzenrikai.css">
<title>CSS 完全に理解した</title>
</head>
<body>
<main>
<p class="kanzenrikai">
CSS<br>完全に理解した
</p>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment