16
折り畳まれた用紙のように私のdivを積み重ねました。私は、各divにテキストを入れてセクションに分割したいと思っています。ボーダーにテキストを配置する方法は？ （HTML、CSS）
私がdivを作った方法では、唯一目に見える部分は境界です。 divにテキストを追加すると、テキストは表示されるべき場所の上または下に表示されます（表示されないdivにあるため）。
基本的に、私のdivは見えません。私のボーダーが見える。私は境界線に表示するテキストが必要です。しかし、これを行うには、各テキストブロックのパディングを変更する必要があります。国境の上にテキストを置く方法はありますか？または、傾けられたdivを取得する簡単な方法はありますか？
私はrotateYを試しましたが、それは縮小させるだけです。
キャッチ - 私はHTMLとCSSのみ使用できます。
CSS：
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
border-top: 260px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 2600px;
width: 600px;
position: absolute;
z-index: -1;
}
#slant3 {
border-bottom: 225px solid #E6E6E6;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
font-family: thorndale for vst;
font-size: 16px;
}
#slant4 {
border-top: 225px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
}
<!DOCTYPE html>
<html lang="en" id="Origami">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Origami</title>
<link href="discover.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Origami" />
<meta name="keywords" content="Origami">
<meta name="author" content="JojoRae" />
</head>
<body>
<div id="columnwrapper2">
<div id="slant1">
<div class="adamas1"></div> <div class="adamas"></div>
<p class="p">
</p>
</div>
<div id="slant2">
<ul class="slides">
<input type="radio" name="group3" id="img-11" checked />
<li class="slide-container">
<div class="slide">
<img src="../ei/treasure.gif" />
</div>
<div class="nav">
<label for="img-15" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
</ul>
</div>
<div id="slant3">
<div class="adamas3"></div>
<p class="p2"></p>
</div>
<div id="slant4">
</div>
</div> <!--closes columnwrapper-->
</body>
</html>
あなたのHTML構造を教えてください。 –
CSSはHTMLと密接に連携しているため、CSSはありますが、欠落しているのはHTMLです。あなたがページのHTMLソースをコピーしてこれを含む質問を更新する方法はありますか？ありがとう – user454038