Tôi đã xếp chồng div của mình để trông giống như giấy chưa mở. Tôi muốn đặt văn bản trên mỗi div, để chia chúng thành các phần.Cách đặt văn bản trên đường viền? (HTML, CSS)
Nhưng cách tôi tạo div, các phần hiển thị duy nhất là các đường viền. Khi tôi thêm văn bản vào các div, văn bản xuất hiện phía trên hoặc bên dưới, nơi văn bản sẽ hiển thị (vì chúng nằm trên các div ẩn).
Về cơ bản, các div của tôi là vô hình. Đường viền của tôi hiển thị. Tôi cần văn bản xuất hiện trên các đường viền. Nhưng để làm điều đó, tôi phải thay đổi phần đệm cho mỗi khối văn bản. Có cách nào để đặt văn bản chỉ trên biên giới? Hay là có cách nào dễ dàng hơn để có được những div bị nghiêng?
Tôi đã thử rotateY nhưng nó chỉ làm cho chúng co lại.
Bắt - Tôi chỉ có thể sử dụng HTML và CSS.
Đây là một ảnh chụp màn hình của nó như thế nào hiện đang xuất hiện:
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>
bạn có thể cho chúng tôi biết cấu trúc HTML của bạn không? –
CSS hoạt động chặt chẽ cùng với HTML, vì vậy mặc dù có CSS, những gì còn thiếu là HTML. Có cách nào bạn có thể sao chép nguồn HTML của trang và cập nhật câu hỏi để bao gồm điều này không? cảm ơn – user454038