- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Challenge: Jewelry Work</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="exam wall">
<div class="chest">
<div class="stone hexa"></div>
<div class="stone penta"></div>
<div class="stone rhomba"></div>
<div class="stone octa"></div>
</div>
</body>
</html>
CSS
selector {
position: absolute;
}
selector {
position: absolute;
border-style: solid;
content: "";
}
selector {
bottom: 70px;
left: 50px;
}
selector {
top: 20px;
right: 40px;
overflow: hidden;
width: 100px;
height: 100px;
}
selector {
top: 50px;
left: 40px;
width: 80px;
height: 40px;
}
selector {
right: 45px;
bottom: 50px;
width: 90px;
height: 35px;
}
selector {
background-color: #7fdbff;
}
selector {
background-color: #2ecc40;
}
selector {
width: 30px;
border-color: #7fdbff transparent;
}
selector {
border-color: #ff4136 transparent;
}
selector {
border-color: #2ecc40 transparent;
}
selector {
top: -30px;
border-width: 0 30px 30px;
}
selector {
border-width: 0 50px 50px;
}
selector {
bottom: -30px;
border-width: 30px 40px 0;
}
selector {
top: -30px;
border-width: 0 40px 30px;
}
selector {
border-width: 50px 30px;
border-color: #ffdc00 transparent;
}
selector {
top: 50px;
border-width: 100px 50px 0;
}
selector {
top: 0;
border-bottom: 0;
}
selector {
bottom: -30px;
border-width: 30px 30px 0;
}
selector {
bottom: 0;
border-top: 0;
}
- Goal
- Result
- Overlay
- Differences
- ?
Press Compare to send your code for review.