More than 5 years have passed since last update.

box-shadow

Posted at 2018-09-29

box-shadowは本来は影をつけるものなのですが，こういった使いかたもできます．

cssのbox-shadowを使って同じ形のものを複製してる感じです．
htmlにはdivしかないです．

sample.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="./sample.css">
</head>

<body>
    <div class="test"></div>
</body>

</html>

sample.css

.test {
    width: 30px;
    height: 30px;
    box-shadow: 50px 0px red, 100px 0px green, 150px 0px blue;
}