Skip to content

Instantly share code, notes, and snippets.

@muddydixon

muddydixon/nest.html

Created February 20, 2014 06:40
Show Gist options
  • Save muddydixon/9108197 to your computer and use it in GitHub Desktop.
Save muddydixon/9108197 to your computer and use it in GitHub Desktop.
Download ZIP
入れ子にして罫線を引きたい(画像メンドクサイ)
Raw
nest.html
<html>
<body>
<style>
#content, #case {
margin: 20px 20px;
height: 100px;
width: 600px;
display: block;
background: cyan;
}
#case {
margin-left: 50px;
background: none;
}
#case .inner {
height: 100px;
background: grey;
margin: 20px;
}
#case .mid:before {
content: ' ';
border-left: 2px solid grey;
border-bottom: 2px solid grey;
width: 20px;
height: 120px;
float: left;
margin-top: -70px;
}
#case .out:first-child .mid:before {
content: ' ';
height: 70px;
margin-top: -20px;
}
#case .out:first-child .inner {
background: red;
}
</style>
<div id="content">
<p>content</p>
</div>
<div id="case">
<div class="out">
<div class="mid">
<div class="inner">
<p>hoge</p>
</div>
</div>
</div>
<div class="out">
<div class="mid">
<div class="inner">
<p>hoge</p>
</div>
</div>
</div>
<div class="out">
<div class="mid">
<div class="inner">
<p>hoge</p>
</div>
</div>
</div>
<div class="out">
<div class="mid">
<div class="inner">
<p>hoge</p>
</div>
</div>
</div>
</div>
</body>
</hmlt>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment