Как разместить текст на границах? (HTML, CSS)

Я собрал свои divs, чтобы они выглядели как развернутая бумага. Я хочу поместить текст в каждый div, чтобы разделить их на разделы.Как разместить текст на границах? (HTML, CSS)

Но так, как я делал свои divs, единственными видимыми частями являются границы. Когда я добавляю текст в div, текст появляется выше или ниже, где он должен показывать (потому что они находятся в невидимых div).

В принципе, мои divs невидимы. Мои границы видны. Мне нужно, чтобы текст появлялся на границах. Но для этого мне нужно изменить заполнение для каждого блока текста. Есть ли способ разместить текст только на границах? Или есть более простой способ получить наклонные 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">&#x2039;</label> 
<label for="img-12" class="next">&#x203a;</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>

источник

2015-12-14 Jenn

Вы можете показать нам свою структуру HTML? –

CSS работает в тесном сотрудничестве с HTML, поэтому, хотя есть CSS, недостает HTML. Есть ли способ скопировать источник HTML страницы и обновить вопрос, чтобы включить это? благодаря – user454038

Я бы лично оставить вне вариант границы (это немного Hacky) и идти с чем-то другой (и, вероятно, проще). Вот несколько вариантов:

1) Использование CSS3 3D-преобразования

Вы пытались это одно, но это не сработало. Из того, что вы говорите в вопросе, проблема, которую вы обнаружили при использовании rotateY (она только уменьшилась), похоже, связана с тем, что вы не объединили ее с perspective. Как только вы это сделаете (и немного поиграйте со значениями, чтобы они подошли к тому, что вы ищете), не только исказится не только div, но и его содержимое, что делает его похожим на тот же угол, что и бумажный эффект.

Ниже приведен пример (also available on this JSFiddle):

html, body { 
 
    background:#444; 
 
} 
 

 
#columnwrapper2 { 
 
    min-width:700px; 
 
} 
 

 
.slant { 
 
    margin:auto auto; 
 
} 
 

 
#slant1 { 
 
    width: 700px; 
 
    height: 225px; 
 
    background-color: white; 
 
    font-family: thorndale for vst; 
 
    font-size: 16px; 
 
} 
 

 
#slant2 { 
 
    width:655px; 
 
    height:225px; 
 
    background:#eee; 
 
    transform: perspective(600px) rotateX(-20deg); 
 
} 
 

 
#slant3 { 
 
    width:668px; 
 
    height:225px; 
 
    background:#ddd; 
 
    transform: perspective(600px) rotateX(20deg) translateY(-33px); 
 
} 
 

 
#slant4 { 
 
    width:642px; 
 
    height:225px; 
 
    background:#eee; 
 
    transform: perspective(600px) rotateX(-20deg) translateY(-33px); 
 
}

<div id="columnwrapper2"> 
 
    <div id="slant1" class="slant"> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit. 
 
    </div> 
 
    </div> 
 
    <div id="slant2" class="slant"> 
 
    <div> 
 
     <img src="http://lorempixel.com/500/200/people" alt="Random Picture" /> 
 
    </div> 
 
    </div> 
 
    <div id="slant3" class="slant"> 
 
    <div> 
 
     Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet. 
 
    </div> 
 
    </div> 
 
    <div id="slant4" class="slant"> 
 
    <div> 
 
     Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien. 
 
    </div> 
 
    </div> 
 
</div> <!--closes columnwrapper-->

2) Использование SVG

Другим вариантом будет использовать SVG. Возможно, это более простая альтернатива, если вы не хотите, чтобы текст искажался с эффектом складывания бумаги (или тот, который не требует воспроизведения с цифрами). Это потребует, чтобы вы знали точную высоту каждого раздела.

Вы можете создать изображение в SVG (непосредственно как изображение или как указано ниже) и поместить его на задний план #columnwrapper2, остальная часть контента будет отображаться поверх изображения.

Смотрите эту демонстрацию (also available on this JSFiddle):

html, body { 
 
    background:#444; 
 
} 
 

 
#columnwrapper2 { 
 
    width:700px; 
 
    position:relative; 
 
} 
 

 
.slant { 
 
    margin:auto auto; 
 
    height:250px; 
 
    width:600px; 
 
    padding:50px auto; 
 
    z-index:2; 
 
    position:relative; 
 
}

<div id="columnwrapper2"> 
 
    <svg width="700px" height="1000px" style="position:absolute;top:0;left:0;z-index:1;"> 
 
    <path fill="#ffffff" d="M0,0 700,0 700,250 0,250Z" /> 
 
    <path fill="#eeeeee" d="M0,250 700,250 650,500 50,500Z" /> 
 
    <path fill="#dddddd" d="M50,500 650,500 700,750 0,750Z" /> 
 
    <path fill="#eeeeee" d="M0,750 700,750 650,1000 50,1000Z" /> 
 
    </svg> 
 
    <div id="slant1" class="slant"> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit. 
 
    </div> 
 
    </div> 
 
    <div id="slant2" class="slant"> 
 
    <div> 
 
     <img src="http://lorempixel.com/500/200/people" alt="Random Picture" /> 
 
    </div> 
 
    </div> 
 
    <div id="slant3" class="slant"> 
 
    <div> 
 
     Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet. 
 
    </div> 
 
    </div> 
 
    <div id="slant4" class="slant"> 
 
    <div> 
 
     Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien. 
 
    </div> 
 
    </div> 
 
</div> <!--closes columnwrapper-->

Одним из преимуществ SVG является то, что он поддерживается большинством браузеров (с предыдущим transform раствором, вы можете найти некоторые проблемы с IE которые нуждаются в настройке).

источник

2015-12-14 12:57:33

Как разместить текст на границах? (HTML, CSS)

ответ

Смежные вопросы