<!DOCTYPE html>
<html lang="ko">
<head>
<title>skew </title>
<style>
h1{text-align: center;}
h1>span{
width: 80px;
height: 80px;
font-size: 80px;
border: 1px solid black;
border-radius: 20px;
box-shadow: 1px 1px 2px red;
margin: 5px;
display: inline-block;
/*크기 지정도 가능하면서 글자를 옆으로 출력*/
}
/*기울기*/
h1>span:nth-child(even){
transform: skewY(-20deg);
}
h1>span:nth-child(odd){
transform: skewY(20deg);
}
</style>
</head>
<body>
<!-- 기울기 -->
<h1>
<span>c</span>
<span>s</span>
<span>s</span>
<span>3</span>
</h1>
</body>
</html>