<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="well/style.css">
<title>Document</title>
</head>
<body>
<div class="block">
<input type="radio" id="tab1" name="inset" value="" checked>
<label for="tab1" id="first"> First </label>
<input type="radio" id="tab2" name="inset" value="">
<label for="tab2" id="second"> Second </label>
<div id="page1">
<h2> Name </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab, tempore tempora ratione repellat porro inventore adipisci nesciunt veniam iste, molestiae, sapiente magnam. At, ullam. </p>
</div>
<div id="page2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eius earum itaque quidem assumenda numquam rerum reiciendis commodi, consequatur nulla, incidunt facilis eligendi dolores ut enim vero, libero quia dicta.</p>
</div>
</div>
</body>
</html>html, body, p, h2 {
padding: 0;
margin: 0;
}
.block {
position: relative;
margin: auto;
width: 400px;
}
.block input {
display: none;
}
.block div {
display: none;
height: 150px;
padding: 12px;
border: 1px solid #c7c7c7;
background-color: #e8e8e8;
}
label:nth-child(2) {
clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
label:nth-child(4) {
clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
}
.block label {
width: 176px;
padding: 10px;
text-align: center;
color: #383838;
background-color: transparent;
border: 1px solid transparent;
cursor: pointer;
}
.block input:checked + label {
color: #000000;
border: 1px solid #c7c7c7;
border-top: 1px solid #e8e8e8;
background: #e8e8e8;
}
#tab1:checked ~ #page1,
#tab2:checked ~ #page2
{ display: block; }
#page1, #page2 {
padding: 25px;
}
p {
text-align: justify;
padding-top: 10px
}
#first {
position: absolute;
top: 200px;
}
#second {
position: absolute;
top: 200px;
left: 202px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.